Dom事件模型,是Dom事件规范的一种。
主要有:
- DOM0 级事件处理程序 | DOM基本事件模型
- DOM2 级事件处理程序
- IE独有的事件模型
- DOM3 级带伤处理程序
DOM0是Dom事件定义的原始阶段,也是最混乱的,但兼容性也是最高的。
DOM0
就是on的方式绑定事件,包括:
- HTML 中 on
<button type="button" onclick="test()">点击</button>
- JS中的on
document.getElementsByTagName("button")[0].onclick = function () {
console.log(1);
};
Dom1级事件是没有定义的,所以没有。
DOM2
主要有:
- addEventListener(eventType, listener[, useCapture])
- removeEventListener(eventType, listener[, useCapture])
eventType ————> 事件名称,大小写敏感
listener ————> 监听函数
useCapture ————> 可选参数,默认false,表示监听函数只在冒泡阶段被触发。
DOM level 2模型属于W3C标准模型,现代浏览器都支持该模型。在该事件模型中,一次事件共有三个过程:
-
事件捕获阶段(Capturing Phase):事件从document一直向下传播到目标元素,依次检查经历过的节点是否绑定了事处监听函数(事件处理程序),如果有则执行,反之不执行
-
事件处理阶段(Target Phase):事件到达目标元素,触发目标元素的监听函数,这个是没有固有有的顺序之分的,按照添加的先后顺序执行
-
事件冒泡阶段(Bubbling Phase):事件从目标元素冒泡到document,依次检查经过的节点是否绑定了事件监听函数,如果有则执行,反之不执行。
IE事件模型
在IE事件模型中,需要使用attachEvent()和detachEvent()方法来触发事件和移除事件。在IE事件模型中,其有两个过程:
-
事件处理阶段(Target Phase):事件到达目标元素,触发目标元素的监听函数
-
事件冒泡阶段(Bubbling Phase):事件从目标元素冒泡到document,依次检查经过的节点是否绑定了事件监听函数,如果有则执行
这里没有指定 useCapture ,默认是 false,即捕获。
DOM3
DOM Level 3事件模型是DOM Level 2的事件模型的升级版,在DOM Level 2事件模型的基础上添加了更多的事件类型:
-
UI事件:当用户与页面上的元素交互时触发,如:load、scroll
-
焦点事件:当元素获得或失去焦点时触发,如:blur、focus
-
鼠标事件:当用户通过鼠标在页面执行操作时触发如:dbclick、mouseup
-
滚轮事件:当使用鼠标滚轮或类似设备时触发,如:mousewheel
-
文本事件:当在文档中输入文本时触发,如:input、change
-
键盘事件:当用户通过键盘在页面上执行操作时触发,如:keydown、keypress
-
合成事件:当为IME(输入法编辑器)输入字符时触发,如:compositionstart
-
变动事件:当底层DOM结构发生变化时触发,如:DOMsubtreeModified
同时DOM3级事件也允许使用者自定义一些事件。在自定义事件称之为自定义事件模型。