DOM0、DOM2 和 DOM3 事件处理方式详细对比

在网页开发中，事件处理是与用户交互的核心部分。DOM（文档对象模型）标准的不同版本为事件处理提供了不同的特性和方法。

DOM0 事件处理方式

DOM0事件处理机制是最早的一种，它主要体现在HTML和JavaScript的紧密集成上。

特点

1.内联事件处理:

事件处理程序可以直接在HTML标签的属性中定义。

例如：html复制代码 Click Me这种方式简单易用，但在事件逻辑复杂时不够灵活。

2.静态绑定:

事件处理程序只能在HTML代码中直接定义，无法在JavaScript中动态修改或删除。

例如：html复制代码 Click Me没有提供解除事件绑定的机制。

3.事件冒泡:

事件从目标元素向父元素传播，即事件冒泡。在DOM0中，事件捕获（从父元素到目标元素的传播）是不可用的。

4.局限性:

无法处理事件捕获。事件处理程序之间的管理不够灵活和强大。

DOM2 事件处理方式

DOM2引入了更先进的事件处理模型，提供了更灵活和功能丰富的事件处理机制。

1.事件监听器:

使用addEventListener方法可以动态地添加事件处理程序，并通过removeEventListener方法移除。

例如：

var button = document.getElementById('myButton');
function handleClick(event) {
    alert('Clicked!');
}
button.addEventListener('click', handleClick);
// 解绑事件
button.removeEventListener('click', handleClick);

这种方式允许在运行时对事件处理程序进行修改和管理。

事件捕获和冒泡:

事件对象:

事件目标:

DOM3 事件处理方式

DOM3进一步增强了事件处理模型，引入了更多的新特性和改进。

特点

1.改进的事件对象:

-   `Event`对象增加了更多的属性和方法，如`initEvent`方法，可以重新初始化事件对象。这些扩展使得事件对象更为全面和灵活。
-   新增了`Event`接口的`currentTarget`属性，用于获取事件当前处理的元素。

2.新的事件类型:

DOM3标准引入了更多的事件类型，

例如：

focusin 和 focusout，用于处理焦点事件的冒泡。

beforeinput 和 input，用于处理用户输入。

3.跨文档事件:

DOM3标准对跨文档事件的支持更好，例如处理iframe之间的事件传递，这在处理复杂的网页结构时尤其重要。

4.增强的事件监听:

EventListener接口的handleEvent方法允许实现事件处理的接口，从而可以将事件处理逻辑集中在一个地方。示例：

handler = {
    handleEvent: function(event) {
        alert('Clicked!');
    }
};
button.addEventListener('click', handler);