DOM事件级别

DOM 事件级别

DOM 级别：0 1 2 3

DOM 事件级别：0 2 3

DOM1 标准并没有定义事件相关的内容

DOM0

绑定事件

<button type="button" onclick="showFn()"></button>
function showFn() {
    alert('Hello World');
}

<button id="btn" type="button"></button>
var btn = document.getElementById('btn');
btn.onclick = function() {
    console.log('Hello World');
}

解绑

btn.onclick = null

优点

• 不需要操作DOM来绑定事件

缺点

• HTML和JS耦合太强

• 一个元素无法同时绑定多个处理函数

DOM2

绑定事件

DOM2级事件定义了addEventListener 和 removeEventListener两个方法，分别用来绑定和解绑事件。

方法中包含三个参数，分别是绑定的事件处理的属性名称（没有on） 、处理函数和是否在捕获时候执行事件处理函数。

<button id="btn" type="button"></button>
var btn = document.getElementById('btn');    
function showFn() {
    alert('Hello World');
}    
btn.addEventListener('click', showFn, false);

解绑

btn.removeEventListener('click', showFn, false)

优点

• 同时绑定几个事件（相同或不同），然后顺序执行，不会覆盖。

缺点

• 不具有跨浏览器优势。

注意

dom0和dom2可以共存，不互相覆盖，但是dom0之间依然会覆盖。

DOM3

DOM3级事件是在DOM2级事件的基础上添加很多事件类型。

• UI事件，当用户与页面上的元素交互时触发，如：load、scroll
• 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
• 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
• 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
• 文本事件，当在文档中输入文本时触发，如：textInput
• 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
• 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
• 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
• 同时DOM3级事件也允许使用者自定义一些事件。

参考

https://www.jianshu.com/p/1b2248f01338

https://blog.csdn.net/qq_44381873/article/details/106722394