DOM的事件绑定、事件监听

JS有三种常用的绑定事件的方法

  • 在DOM元素上直接绑定
  • 在JS代码中绑定
  • 在JS中绑定事件监听函数

在DOM中直接绑定,行内绑定



  1. 我们可以在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、onkeydown、onkeyup等。不列出了。
  2. 行内绑定时没办法解绑的,但是可以将绑定函数改写成空函数来实现。

在JS代码中绑定,也叫DOM0级事件绑定



  1. JS代码中绑定可以使JS和HTML分离,结构清晰,便于管理和开发。
  2. DOM级事件只能绑定一个事件,如果绑定多个也只有最后一个会被触发
  3. 想解绑直接可以把绑定指向null btn.onclick = null;
  4. 如果对一个元素同时进行行内绑定和JS绑定,行内绑定会被JS绑定覆盖。

使用事件监听绑定,也叫DOM2级事件,可以绑定多个监听



  1. addEventListener() 或 attachEvent() 来绑定事件监听函数。attachEvent事件名要加'on',没有第三个参数
  2. 如果不考虑兼容IE6-8可以只使用addEventListener。
  3. DOM2级事件可以同时绑定多个监听,事件触发时会全部监听到。
  4. 第三个参数有true和false两个值,false:事件在冒泡阶段监听(默认值),true:在捕获阶段触发。
  5. IE的attachEvent没有第三个参数,它默认就是在冒泡阶段触发。
  6. DOM2级事件有单独的解绑函数。
    事件冒泡、事件捕获和事件委托

事件监听的解绑

if (document.removeEventListener) { // 支持 removeEventListener
    btn.removeEventListener('click', fn, false);
} else { //(IE6-8)
    btn.detachEvent('onclick', fn);
}

三个参数要和绑定时完全一致才会解绑成功。第三个参数默认值时false

现在DOM3级事件也有了

和DOM2区别不大,我还没有研究,就先不卖弄了。

你可能感兴趣的:(DOM的事件绑定、事件监听)