DOM级别
DOM级别一共可以分为四个级别：DOM0级、DOM1级、DOM2级和DOM3级。而DOM事件分为3个级别：DOM0级事件处理，DOM2级事件处理和DOM3级事件处理。
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');
}
以上这两种写法都属于DOM0级别的事件处理，从上面的代码中可以看出其优缺点如下：
优点
- 不需要操作DOM来完成事件的绑定
缺点 - HTML和JS耦合太强
- 一个元素无法同时绑定多个处理函数
DOM0事件解绑的方式：给事件处理属性赋值null来解绑事件如： btn.onclick = null
DOM2
<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); 解绑事件
DOM2级事件定义了addEventListener 和 removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含三个参数，分别是绑定的事件处理的属性名称（没有on） 、处理函数和是否在捕获时候执行事件处理函数如果我们还需要添加一个鼠标的移入的方法，只需要：
需要注意的是IE8以下版本不支持 addEventlistener 和 removeEventListerner
需要使用attachEvent和detachEvent实现：
btn.attachEvent('onclick', showFn); // 绑定事件
btn.detachEvent('onclick', showFn); // 解绑事件
这里我们不需要传入第三个参数，因为IE8以下版本只支持冒泡型事件。
DOM3
DOM3级事件是在DOM2级事件的基础上添加很多事件类型。
- UI事件，当用户与页面上的元素交互时触发，如：load、scroll
- 焦点事件，当元素获得或失去焦点时触发，如：blur、focus
- 鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
- 滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
- 文本事件，当在文档中输入文本时触发，如：textInput
- 键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
- 合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
- 变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
- 同时DOM3级事件也允许使用者自定义一些事件。
PS : 为什么没有DOM1级事件处理呢？
因为1级DOM标准并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。
参考博客：https://www.jianshu.com/p/622d994906f7
https://www.jianshu.com/p/01c2688db289
网友评论