likes
comments
collection
share

如何详细区分DOM0、DOM2 和 DOM3DOM0、DOM2 和 DOM3 事件处理方式详细对比 在网页开发中，事件处

作者站长头像
站长
· 阅读数 19

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);

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

  1. 事件捕获和冒泡:

    • 引入了事件捕获阶段和事件冒泡阶段。可以通过第三个参数capture来指定事件处理的阶段：

      javascript
复制代码
button.addEventListener('click', handleClick, true); // 捕获阶段
button.addEventListener('click', handleClick, false); // 冒泡阶段

    • 捕获阶段是从根元素到目标元素，冒泡阶段是从目标元素向上到根元素。

  2. 事件对象:

    • 事件处理程序接收一个Event对象，该对象包含了事件的详细信息，如事件类型、目标元素、事件位置等。示例：

      javascript
复制代码
function handleClick(event) {
    console.log(event.type); // 输出 'click'
    console.log(event.target); // 输出触发事件的元素
}
button.addEventListener('click', handleClick);

    • Event对象还提供了stopPropagation和preventDefault方法，允许开发者控制事件的传播和默认行为。

  3. 事件目标:

    • Event对象的target属性指向事件的实际目标元素，这在事件冒泡和捕获过程中尤为重要。

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);

更多的事件属性和方法:

例如，Event对象的composed属性指示事件是否穿越了影子DOM（Shadow DOM），增加了对Web组件的支持。

图片摘自W3C——DOM3级事件草案

如何详细区分DOM0、DOM2 和 DOM3DOM0、DOM2 和 DOM3 事件处理方式详细对比 在网页开发中，事件处

总结

从DOM0到DOM3，事件处理机制经历了从简单到复杂的发展过程：

DOM0 : 提供了基本的事件处理能力，但功能有限，缺乏灵活性。

DOM2 : 引入了事件监听器、事件捕获和冒泡机制，以及丰富的事件对象，使得事件处理更为灵活和功能强大。

DOM3 : 进一步扩展了事件对象的功能，引入了新事件类型和跨文档事件处理，提高了事件处理的能力和灵活性。

转载自:https://juejin.cn/post/7407995596977504310
评论
请登录