JavaScript 中的 DOM 事件

这篇文章主要介绍了 JavaScript 中 DOM 0 级事件和 DOM 2 级事件的区别介绍

DOM 0 级事件

写在标签里

<a href="#" id="main" onclick="fn();fn1();">
  <button type="button">this is button</button>
</a>

如上所示,把 onclick 写在标签内,都是 DOM 0 级事件,方法 fn 和 fn1 依次执行

绑定事件

var ele = document.getElementById("main");
ele.onclick = function() {
  console.log("做第一件事");
};

这也是 DOM 0 级事件方法,我们需要用 XXX.onYYY=ZZZ 这种形式来绑定事件,当点击元素时,会输出 "做第一件事",恩,很理想。

接下来,当我们希望在点击该元素的时候再做另一件事怎么办呢?下面这样:

ele.onclick = function() {
  console.log("做第二件事");
};

这样肯定不行,因为我们是希望点击时既输出 “做一件事”,又要输出 “做第二件事”。而这样的话后面的方法将前面的覆盖掉了,因为 XXX.onYYY=ZZZ 只能给元素的某个事件类型(如例子中的 click 事件)绑定一个方法 ZZZ;这个问题难不到我们,既然这样,那我们就把要做的事情全都放在 ZZZ 里不就行了么;

function fn1() {
  console.log("做第一件事");
}
function fn2() {
  console.log("做第二件事");
}
ele.onclick = function() {
  fn1();
  fn2();
};

dom 2 级事件

jQuery 绑定事件

$("#hash").click(function() {
  alert("jQuery 的 DOM 2 级点击第一次");
});
$("#hash").click(function() {
  alert("jQuery 的 DOM 2 级点击第二次");
});

通过 jQuery 方法来绑定事件,不会覆盖之前方法体里写的事件。

JavaScript 绑定事件

btn.addEventListener(
  "click",
  function() {
    alert("原生 DOM 2 级第一次 click");
  },
  false
);
btn.addEventListener(
  "click",
  function() {
    alert("原生 DOM 2 级第二次click");
  },
  false
);

通过原生的 JavaScript 方法来绑定事件,会覆盖之前方法体里写的事件。

DOM 0 级和 DOM 2 级共存

<a href="#" id="hash" onclick="fn();fn1();">
  <button type="button">返回上面进行开通</button>
</a>

<script type="text/javascript">
function fn(){
  alert('ade');
}
function fn1(){
  alert('ade111');
}
var btn=$('#hash').get(0);
btn.onclick=function(){
  alert('111');
};
$('#hash').click(function(){
  alert('jQuery 的 DOM 2 级点击第一次');
});
btn.addEventListener('click',function(){
  alert('原生 DOM 2 级第一次 click')
},false);
</script>

上面的例子有一个两个 DOM 0 级和两个 DOM 2 级绑定事件,js 里面写的 DOM 0 级会覆盖行内的 fn 和 fn1 方法,但是 js 里面的 DOM 0 可以和 dom2 共存。

亲!!! 听说给作者打赏一杯咖啡钱,会给自己带来好运哦!