1. 0级DOM

包含了一些基本事件和 “原始事件模型” ，该模型指明了应该如何为元素添加事件监听，在该模型中，事件不会传播，即没有事件流。同时，用事件的返回值来表示是否阻止浏览器默认行为。

为元素绑定事件监听的两种方法：

1）在标签上，直接为事件绑定对应的回调（内联事件）

<input type="button" onclick="fun()">

 这种方法，是无法使用闭包和匿名函数的。

2）也可以通过 js 指定事件的回调函数，这种方法等价于内联事件：

var btn = document.getElementById('.btn');
btn.onclick = fun;

监听回调的返回值为 false 时，可以阻止浏览器执行默认行为。

移除事件监听只有一种方法：

btn.onclick = null;

这种方式所有浏览器都兼容，但是逻辑与显示并没有分离。

在0级 DOM 事件模型中，回调函数被直接赋到了对应的监听事件上。就好像我们用 let a = 1; 定义一个变量，通过 a = 2; 改变了a的值，前一个被赋予的值自然就被顶替掉了。所以这种直接赋值的方法，是很难实现为一个事件添加多个回调函数的。

同时，赋值的方式可以保证回调函数中的 this 指向的是绑定事件监听的元素。

2. 1级DOM

没有定义出新的事件模型，仅仅是定义了 HTML 和 XML 文档的底层结构。

3. 2级DOM

添加了许多新的事件，定义了2级 DOM 事件模型，该模型指明了新的添加、移除事件监听的方式，还增添了事件流。

2级DOM把新增的事件分为了5种类型：

UI事件：DOMActive、DOMFocusIn、DOMFocousOut（元素激活、获取焦点、失去焦点）

鼠标事件：mousedown、mouseup、click、dbclick

键盘事件：keydown 、 keypress 、 keyup

HTML事件：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur。

变动事件：当底层 DOM 结构发生变化时触发

DOMSubtreeModified：DOM 结构中发生任何变化时都会触发。这个事件在其他任何事件触发后都会触发。

DOMNodeInserted：一个节点作为子节点，被插入到另一个节点上时触发

DOMNodeRemoved：节点从其父节点中被移除时触发

DOMNodeInsertIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在 DOMNodeInserted 之后触发

DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在 DOMNodeRemoved 之后触发　

DOMAttrModified：在特性被修改之后触发

DOMCharacterDataModified：在文本节点的值发生变化时触发。

在2级 DOM 事件模型中，借助发布订阅模式操作事件回调，可以实现为一个事件添加多个监听回调，同时，还可以准确地移除某一个具体的监听回调

var btn = document.getElementById('.btn');
btn.addEventListener(‘click’, showMessage1, false); // 为btn绑定监听事件，并添加一个回调函数
btn.addEventListener(‘click’, showMessage2, false); // 为btn的点击事件再添加一个监听回调
btn.removeEventListener(‘click’, showMessage1, false); // 清除btn上的第一个监听回调

第三个参数表示：是在捕获阶段处理还是冒泡阶段处理绑定的事件回调。false（默认值），表示和 IE 事件模型行为保持一致，也就是在冒泡阶段处理。

其次，2级 DOM 事件模型将事件传播分为了三个阶段：

捕获阶段：事件由最外层document向内层传播，一直传递到对应触发事件的元素

命中事件：执行对应监听回调

冒泡阶段：从命中元素向外层元素传播，一直传递到 document

触发事件时，会产生一个事件对象 event，在该对象中保存着与事件有关的各种信息，例如：添加事件的元素、事件的类型...

现在，我们依旧可以用0级 DOM 事件模型中的方法添加事件监听，但是在事件触发时，会伴有事件流的产生。只不过，这种方式添加的事件，监听只能在冒泡阶段触发，而不能指定捕获阶段。

在2级 DOM 中，可以用 event.currentTarget 来获取绑定事件的元素。用 event.target 获取触发事件的元素。

在2级 DOM 中事件模型中，通过 preventDefault() 阻止浏览器的默认事件。

4. 3级DOM

再次增加了一些事件，提升交互能力。

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                       

原文链接：https://blog.csdn.net/qq_44647809/article/details/120688232