wshy-docs

Appearance

JavaScript 事件流详解 ​

事件在 JavaScript 中是对用户行为或浏览器动作的反应，例如点击和鼠标悬浮。了解事件流的本质是掌握事件的接收和执行顺序，这对于高效和有效的事件处理至关重要。

事件流的三个阶段： ​

  1. 事件捕获阶段：事件首先由全局对象 window 接收，然后沿着 DOM 树向下传递至触发事件的具体元素，这一过程称为事件捕获。
  2. 目标阶段：事件到达实际触发的元素。
  3. 事件冒泡阶段：事件开始从触发元素向上通过 DOM 树传播，直至达到全局对象 window。

事件绑定的演变 ​

DOM 0 级事件处理 ​

在 W3C 将 DOM 标准化之前，事件通常通过属性（如 onclick）直接绑定在元素上。

DOM 1 级事件处理 ​

虽然 DOM 1 级制定了标准，事件绑定方式并未有显著变化。

DOM 2 级事件处理 ​

DOM 2 级引入了更多的属性和方法，其中 addEventListener 方法用于绑定事件。需要注意的是：

  • 使用 addEventListener 绑定相同的事件和处理函数时，后续的绑定会覆盖先前的绑定。
  • 默认情况下，事件处理函数在事件冒泡阶段执行，但可以通过 addEventListener 的第三个参数改变这一行为。
  • 若事件处于目标阶段，则其执行顺序依赖于绑定事件的顺序。
  • 使用 event.stopPropagation() 可以阻止事件进一步传播。

DOM 3 级事件处理 ​

在 DOM 2 级的基础上，DOM 3 级增加了更多事件类型，包括鼠标事件和键盘事件等。

事件委托 ​

事件委托利用事件冒泡机制，通过在父级元素上绑定事件处理函数来管理子元素的事件。这种方法的优点包括减少绑定的函数数量，节省资源，并且能够自然地应用于动态添加的元素。

阻止事件传播和默认行为 ​

js
event.stopPropagation(); // 阻止事件冒泡，但不阻止默认行为，如链接跳转。
event.preventDefault();  // 不阻止事件冒泡，但阻止默认行为。
return false;            // 在 `onclick` 中使用时，同时阻止冒泡和默认行为。
event.returnValue = false; // 在 `addEventListener` 中使用时，同时阻止冒泡和默认行为。

通过深入理解 JavaScript 的事件流和相关的事件处理机制，开发者可以更加灵活和高效地管理应用中的用户交互。