DOM 0 ~ DOM 3 是 W3C 的标准事件模型。 IE 自立门户，有自己独特的事件模型

  1. DOM 0

DOM 0 不是 W3C 规范。而仅仅是对在 Netscape Navigator 3.0 和 Microsoft Internet Explorer 3.0 中的等价功能性的一种定义

  1. DOM 1

DOM 1 专注于 HTML 和 XML 文档模型。它含有文档导航和处理功能。

其实世上本来没有 DOM 0，叫的人多了就有了 DOM 0 级。 在1998 年 10 月 DOM1 级规范成为 W3C 的推荐标准。 在此之前的实现，我们就习惯称为 DOM 0 级，其实本是没有这个标准的。

  1. DOM 2

DOM 2 对DOM 1添加了样式表对象模型，并定义了操作附于文档之上的样式信息的功能性。
DOM 2 还定义一个事件模型（Events，规定了访问文档事件的 API），并提供了对 XML 命名空间的支持。

  1. DOM 3

DOM 3 规定了内容模型 （DTD 和 Schemas）和文档验证。
DOM 3 同时规定了文档加载和保存、文档查看、文档格式化和关键事件

  1. IE 的事件模型

1. DOM 0

事件模型

DOM 0 事件模型只有一个阶段：事件冒泡

绑定方式

DOM 0 的事件绑定有两种方式

  • 在 html 元素上直接绑定事件
  • 在 JS 中获取元素，为元素绑定上 onXXX事件

    阻止冒泡：event.stopPropagation() 阻止浏览器默认事件：event.preventDefault() 事件源：event.target 当前触发元素：event.currentTarget 冒泡路径：event.path

  1. // 方式一
  2. <div onClick="console.log('div1')"> </div>
  4. <div onClick="fn"> </div>
  5. <script>
  6.   function fn() {
  7.       console.log('div2')
  8.   }
  9. </script>
  1. // 方式二
  2. <div id="div"></div>
  3. <script>
  4.     document.getElementById('div').onclick = function() { console.log('xxx') }
  5. </script>

卸载绑定

在 JS 中，直接把元素的监听函数赋值 null
element.onxxx = null

2. DOM 2

事件模型

DOM2 事件模型分为三个阶段：

  1. 捕获阶段
    1. 事件从Document 对象沿着文档树向下传播给节点。
    2. 如果目标的任何一个祖先专门注册了事件监听函数，那么在事件传播的过程中就会运行这些函数。（DOM 0 事件模型处理没有捕获阶段）
  2. 目标阶段
    1. 下一个阶段发生在目标节点自身，直接注册在目标上的适合的事件监听函数将运行。（一般将此阶段看作冒泡阶段的一部分）
  3. 冒泡阶段：
    1. 这个阶段事件将从目标元素向上传播回Document 对象（与捕获相反的阶段）。
    2. 虽然所有事件都受捕获阶段的支配，但并不是所有类型的事件都冒泡。

      绑定方式

      DOM 2 的事件绑定只有一种方式
  • 在 JS 中获取元素，用 addEventListener为元素绑定事件

  • element.addEventListener(<eventName>, <eventFunction>,<isCapture>)

    • isCapture：是否为监听捕获阶段，执行的函数。默认 false
      1. <button id="btn">1<button>
      2. <script>
      3. document.getElementById('btn').addEventListener('click', '')  
      4. </script>

      卸载绑定

  • 在 JS 中获取元素，用 removeEventListener为元素卸载绑定事件

element.removeEventListener(<eventName>, <eventFunction>,<isCapture>)

3. DOM 3

DOM 3 事件规定了一下几种事件：

  • UI 事件，当用户与页面上的元素交互时触发；
  • 焦点事件，当元素获得或者失去焦点时触发；
  • 鼠标事件，当用户通过鼠标在页面上执行操作时触发；
  • 滚轮事件，当使用鼠标滚轮（或类似设备）时触发；
  • 文本事件，当在文档中，输入文本时触发；
  • 键盘事件，当用户通过键盘在页面上执行操作时触发；
  • 合成事件，当为 IME（Input Method Editor，输入法编辑器）输入字符时触发；
  • 变动事件，当底层 Dom 结构发生变化时触发；

DOM 3 还定义了自定义事件，自定义事件不是由 DOM 原生触发的，它的目的是让开发人员创建自己的事件。
通过const customEvent = document.createEvent("CustomEvent") 创建自定义事件。
cutomEvent是一个对象，该对象原型上有一个方法initCustomEvent，方法接受四个参数

  • type<string>：，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
  • bubble<boolean>：事件是否可冒泡
  • cancelLabel<boolean>：事件是否可取消
  • detail<any>：保存在event对象的 detail 属性中 ```javascript // 自定义事件示例
  2. <a name="v3kmr"></a>
  3. # 4. IE 事件模型
  4. > 包括 IE9 在内的主流浏览器都支持 DOM 2级 事件，IE9 也支持 DOM 3级 事件
  6. <a name="KCKTH"></a>
  7. ## 事件模型
  8. IE 事件模型只有目标阶段和冒泡阶段
  9. <a name="kIESl"></a>
  10. ## 绑定方式
  11. IE 事件模型绑定只有一种方式
  13. - 在 JS 中获取元素，用 `attachEvent`为元素绑定事件
  14. - `element.attachEvent(on + <eventName>, <eventFunction>)`
  15. > 阻止冒泡：`event.cancelBubble`
  16. > 阻止默认事件：`event.returnValue = false`
  18. ```html
  19. <button id="btn">1<button>
  20. <script>
  21.     document.getElementById('btn').attachEvent('click', (event) => console.log(event))  
  22. </script>

卸载绑定

element.detachEvent(on + <eventName>, <eventFunction>)

参考资料

《DOM事件模型三（关于Dom0级和Dom2级）》
《javascript中DOM0,DOM2,DOM3级事件模型解析》