Dom事件模型

- 日理万妓 2023-07-19 12:13 23阅读 0赞

Dom事件模型，是Dom事件规范的一种。

主要有：

1.  DOM0 级事件处理程序 | DOM基本事件模型
2.  DOM2 级事件处理程序
3.  IE独有的事件模型
4.  DOM3 级带伤处理程序

DOM0是Dom事件定义的原始阶段，也是最混乱的，但兼容性也是最高的。

# DOM0 #

就是on的方式绑定事件，包括：

1.  HTML 中 on

1.  JS中的on

document.getElementsByTagName("button")[0].onclick = function () { 
    	console.log(1);
    };

Dom1级事件是没有定义的，所以没有。

# DOM2 #

主要有：

1.  addEventListener(eventType, listener\[, useCapture\])
2.  removeEventListener(eventType, listener\[, useCapture\])

eventType ————> 事件名称，大小写敏感  
listener ————> 监听函数  
useCapture ————> 可选参数，默认false，表示监听函数只在冒泡阶段被触发。

DOM level 2模型属于W3C标准模型，现代浏览器都支持该模型。在该事件模型中，一次事件共有三个过程：

1.  事件捕获阶段（Capturing Phase）：事件从document一直向下传播到目标元素，依次检查经历过的节点是否绑定了事处监听函数（事件处理程序），如果有则执行，反之不执行
2.  事件处理阶段（Target Phase）：事件到达目标元素，触发目标元素的监听函数，这个是没有固有有的顺序之分的，按照添加的先后顺序执行
3.  事件冒泡阶段（Bubbling Phase）：事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行，反之不执行。

# IE事件模型 #

在IE事件模型中，需要使用attachEvent()和detachEvent()方法来触发事件和移除事件。在IE事件模型中，其有两个过程：

1.  事件处理阶段（Target Phase）：事件到达目标元素，触发目标元素的监听函数
2.  事件冒泡阶段（Bubbling Phase）：事件从目标元素冒泡到document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行

这里没有指定 useCapture ，默认是 false，即捕获。

# DOM3 #

DOM Level 3事件模型是DOM Level 2的事件模型的升级版，在DOM Level 2事件模型的基础上添加了更多的事件类型：

1.  UI事件：当用户与页面上的元素交互时触发，如：load、scroll
2.  焦点事件：当元素获得或失去焦点时触发，如：blur、focus
3.  鼠标事件：当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
4.  滚轮事件：当使用鼠标滚轮或类似设备时触发，如：mousewheel
5.  文本事件：当在文档中输入文本时触发，如：input、change
6.  键盘事件：当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
7.  合成事件：当为IME（输入法编辑器）输入字符时触发，如：compositionstart
8.  变动事件：当底层DOM结构发生变化时触发，如：DOMsubtreeModified

同时DOM3级事件也允许使用者自定义一些事件。在自定义事件称之为自定义事件模型。