事件绑定、冒泡、捕获、委托

约 636 字大约 2 分钟

2025-03-12

一、概念

事件绑定是指给一个或一组元素注册事件监听事件，以便触发事件时可以执行对应的处理函数

事件捕获是指自外向内把事件传递到目标元素的过程。当一个事件发生时，会先经过最外层的元素，然后逐级向下传递，直到达到最具体的元素。

事件冒泡是指自内向外把事件向外传递的过程。当一个事件发生时，会先触发最具体的元素上的事件处理函数，然后逐级向上冒泡，直到达到最外层的元素。

事件委托（Event delegation）是一种在开发中常用的处理事件的技术。它利用事件冒泡的原理，在父元素上监听事件，然后通过判断事件来源来执行相应的操作。

你可以使用event.stopPropagation()方法来停止事件的传播，这样事件就不会继续向上传播。

例如：在这个例子中，当元素被点击时，事件不会继续传播到父元素或其他元素。

element.addEventListener("click", function (event) {
  event.stopPropagation();
  // 其他业务代码
});

可以使用event.preventDefault()方法来阻止事件的默认行为。比如阻止 <a> 的跳转、按钮的点击

如果是通过 on 事件 添加，可以通过 return false 的方式阻止默认处理

element.onclick = function () {
  return false;
};

优点：使用事件委托的主要优点是减少了事件处理函数的数量，提高了性能和内存占用。当页面中有大量相似的子元素需要绑定事件时，使用事件委托可以将事件监听器绑定到父元素上，而不是每个子元素上，从而避免了为每个子元素都创建一个事件处理函数的开销。
缺点：事件委托也有一些限制，例如事件冒泡的机制和事件源的判断需要额外的处理。此外，由于事件委托将事件监听器绑定到父元素上，因此在要委托的父元素被移除时，需要手动取消事件委托，防止内存泄漏。

// 原生
element.addEventListener("click", function (event) {
  // event.target 中可以获取到具体的触发的子元素
  let targetDom = event.target;
});

2025/8/24 08:17

查看所有更新日志