揭秘JavaScript事件执行机制，了解DOM事件背后的秘密

前端

2024-02-22 09:05:12

JavaScript全解析——DOM事件（下）

事件执行机制

事件执行机制，顾名思义，就是JavaScript是如何处理事件的。当一个HTML元素触发事件时，JavaScript会根据事件执行机制来决定如何处理这个事件。

思考一个问题：

当一个大盒子嵌套一个小盒子的时候，并且两个盒子都有点击事件，你点击里面的小盒子，外面的大盒子上的点击事件也会触发吗？

答案是肯定的，因为JavaScript的事件执行机制是基于事件冒泡的。

事件冒泡

事件冒泡是指当一个元素触发事件时，这个事件会逐级向它的父元素传播，直到到达根元素（document对象）。如果事件在传播过程中没有被任何元素捕获，那么它将被默认处理。

例如，在上面的例子中，当我们点击小盒子时，点击事件会先触发小盒子的点击事件处理程序，然后继续向上传播，触发大盒子的点击事件处理程序。

事件捕获

事件捕获与事件冒泡相反，它是一种从根元素开始向下传播事件的方式。当一个元素捕获事件时，这个事件不会继续向它的子元素传播。

JavaScript事件捕获很少使用，因为它可能会导致事件处理程序的执行顺序与事件发生的顺序不一致。

阻止事件冒泡和捕获

我们可以通过调用Event对象的stopPropagation()方法来阻止事件冒泡，或者通过调用Event对象的stopImmediatePropagation()方法来阻止事件冒泡和捕获。

例如，如果我们不想让大盒子上的点击事件处理程序被执行，我们可以通过在小盒子上的点击事件处理程序中调用Event对象的stopPropagation()方法来阻止事件冒泡。

事件委托

事件委托是一种处理事件的技巧，它可以提高事件处理程序的性能。

事件委托的原理是将事件处理程序绑定到父元素上，而不是绑定到每个子元素上。当子元素触发事件时，事件会逐级向父元素传播，直到到达绑有事件处理程序的父元素，然后由父元素上的事件处理程序来处理这个事件。

事件委托的好处是，它可以减少需要绑定的事件处理程序的数量，从而提高事件处理程序的性能。

总结

JavaScript的事件执行机制基于事件冒泡，当一个元素触发事件时，这个事件会逐级向它的父元素传播，直到到达根元素。我们可以通过调用Event对象的stopPropagation()方法来阻止事件冒泡，或者通过调用Event对象的stopImmediatePropagation()方法来阻止事件冒泡和捕获。事件委托是一种处理事件的技巧，它可以提高事件处理程序的性能。

事件执行机制的实例

示例1：

<div id="parent">
  <button id="child">Click me!</button>
</div>

// 为父元素绑定点击事件处理程序
document.getElementById("parent").addEventListener("click", function() {
  alert("Parent element clicked!");
});

// 为子元素绑定点击事件处理程序
document.getElementById("child").addEventListener("click", function() {
  alert("Child element clicked!");
});

当我们点击子元素时，子元素上的点击事件处理程序和父元素上的点击事件处理程序都会被执行。这是因为事件冒泡的缘故。

示例2：

<div id="parent">
  <button id="child">Click me!</button>
</div>

// 为父元素绑定点击事件处理程序
document.getElementById("parent").addEventListener("click", function(e) {
  e.stopPropagation();
  alert("Parent element clicked!");
});

// 为子元素绑定点击事件处理程序
document.getElementById("child").addEventListener("click", function() {
  alert("Child element clicked!");
});

当我们点击子元素时，只有子元素上的点击事件处理程序会被执行，父元素上的点击事件处理程序不会被执行。这是因为我们在子元素上的点击事件处理程序中调用了Event对象的stopPropagation()方法来阻止事件冒泡。

示例3：

<div id="parent">
  <button id="child">Click me!</button>
</div>

// 为根元素绑定点击事件处理程序
document.addEventListener("click", function() {
  alert("Document element clicked!");
});

// 为父元素绑定点击事件处理程序
document.getElementById("parent").addEventListener("click", function(e) {
  e.stopPropagation();
  alert("Parent element clicked!");
});

// 为子元素绑定点击事件处理程序
document.getElementById("child").addEventListener("click", function() {
  alert("Child element clicked!");
});