DOM0、DOM2和DOM3级事件处理方式的主要区别在于它们如何将事件处理程序附加到HTML元素以及它们支持的事件类型。
DOM0级事件处理:
- 方式: 直接将事件处理程序赋值给HTML元素的属性。例如：
element.onclick = function() { ... };或者在HTML中直接写onclick="..."。 - 特点:
- 简单易用，兼容性最好。
- 每个事件类型只允许一个处理程序。新的处理程序会覆盖旧的。
- 无法进行事件捕获。只支持事件冒泡。
DOM2级事件处理:
- 方式: 使用
addEventListener()和removeEventListener()方法来添加和删除事件处理程序。例如：element.addEventListener('click', function() { ... }, false); - 特点:
- 可以为同一元素的同一事件类型添加多个处理程序。它们会按照添加的顺序依次执行。
- 支持事件捕获和冒泡。第三个参数
useCapture控制事件处理程序是在捕获阶段还是冒泡阶段执行。true表示捕获阶段，false表示冒泡阶段（默认）。 - 更好的控制和灵活性。
DOM3级事件处理:
- 方式: 在DOM2级事件处理的基础上，DOM3级引入了更多事件类型和事件模型。
- 特点:
- 定义了更多的事件类型，例如鼠标滚轮事件、键盘事件、文本事件等。
- 引入了新的事件模型，例如
KeyboardEvent、MouseEvent、TouchEvent等，提供了更丰富的事件信息。
总结表格:
| 特性 | DOM0 | DOM2 | DOM3 |
|---|---|---|---|
| 添加方式 | 直接赋值给元素属性 | addEventListener() |
addEventListener() |
| 删除方式 | 直接赋值为 null |
removeEventListener() |
removeEventListener() |
| 多个处理程序 | 不支持，后添加的会覆盖之前的 | 支持 | 支持 |
| 事件捕获 | 不支持 | 支持 | 支持 |
| 事件冒泡 | 支持 | 支持 | 支持 |
| 事件类型 | 较少 | 较多 | 更多，更细化 |
| 兼容性 | 最好 | 良好 | 良好 |
示例:
const element = document.getElementById('myElement');// DOM0
element.onclick = function() {console.log('DOM0 click');
};// DOM2
element.addEventListener('click', function() {console.log('DOM2 click 1');
}, false);element.addEventListener('click', function() {console.log('DOM2 click 2');
}, false);// DOM3 (Example using MouseEvent)
element.addEventListener('click', function(event) {console.log('DOM3 click, clientX:', event.clientX);
}, false);
在这个例子中，点击 myElement 元素会依次输出 "DOM0 click"、"DOM2 click 1"、"DOM2 click 2" 和 "DOM3 click, clientX: ..."，展示了不同级别事件处理程序的执行顺序以及 DOM3 级事件如何提供更详细的事件信息 (例如 clientX)。
希望这个解释能够帮助你理解DOM0、DOM2和DOM3级事件处理方式的区别。
