javascript事件捕获机制【深入分析IE和DOM中的事件模型】

Javascript事件捕获机制：深入分析IE和DOM中的事件模型

Javascript事件是指Web页面交互中发生的各种行为，例如用户单击、滚动、键盘输入、鼠标移动等。针对这些事件，Javascript为我们提供了事件捕获和事件冒泡两种机制。本文将深入分析IE和DOM中的事件模型，并结合示例说明它们的具体用法。

IE事件模型

以单击事件为例，在IE浏览器中，事件捕获的执行顺序如下：

1. 从window对象开始，事件逐层向下，经过document、html、body等各个元素，直到事件源元素，这个过程称为“事件捕获”阶段。

2. 在事件源元素上触发单击事件，在IE中，事件不会停留在事件源元素上，会沿着捕获路径往上冒泡，直到重新回到window对象，这个过程称为“事件冒泡”阶段。

因此，在IE中，单击事件的执行顺序为“事件捕获”阶段 -> 事件源元素上触发单击事件 -> “事件冒泡”阶段。

DOM事件模型

与IE不同，在DOM中，事件捕获和事件冒泡都是从顶层对象逐层向下执行。以单击事件为例，在DOM中，事件的执行顺序如下：

1. 从顶层对象window开始，事件逐层向下，经过document、html、body等各个元素，直到事件源元素，这个过程称为“事件捕获”阶段。

2. 在事件源元素上触发单击事件，在DOM中，事件会从事件源元素再次向上冒泡，直到重新回到顶层对象window，这个过程称为“事件冒泡”阶段。

因此，在DOM中，单击事件的执行顺序为“事件捕获”阶段 -> 事件源元素上触发单击事件 -> “事件冒泡”阶段。

示例说明

1. 添加事件监听器

function clickHandler() {
  console.log('单击事件');
}

document.getElementById('elementId').addEventListener('click', clickHandler, false);

代码中，我们使用了DOM的addEventListener方法，为id为'elementId'的元素添加了单击事件的监听器。第三个参数为false，表示该监听器在事件冒泡阶段执行，如果改为true，则在事件捕获阶段执行。

1. 阻止事件冒泡

function clickHandler(event) {
  event.stopPropagation();

  console.log('单击事件');
}

document.getElementById('elementId').addEventListener('click', clickHandler, false);

代码中，我们为单击事件的监听器增加了一个event参数，并在函数内部调用event.stopPropagation()方法，可以阻止事件冒泡。即使后续还有其他元素的单击事件监听器，它们也不会被触发。

通过上述示例，我们深入了解了IE和DOM中的事件模型，以及如何为元素添加事件监听器和阻止事件冒泡。