掌握JS事件流, 突破前端面试, 拿下理想offer

前端

2023-09-11 06:37:16

JS事件流的本质：从同心圆说起

想象你在纸上画了一些同心圆，当你把手指按在最里面圆的圆心时，你的手指不仅在最里面圆里，还同时在所有的圆里。

这个比喻与 JS 事件流有着异曲同工之妙。当一个事件在 DOM 元素上发生时，它不仅会在这个元素上触发，还会依次向上传播到它的父元素、祖先元素，一直到根元素 html。这种事件传播的方式被称为事件冒泡。

认识 DOM 事件：鼠标点击、键盘输入、滚动等

DOM 事件是指发生在 DOM 元素上的事件，比如鼠标点击、键盘输入、滚动等。当事件发生时，浏览器会创建一个事件对象，并把它传递给事件处理程序。

事件对象包含了事件的相关信息，比如事件类型、发生事件的元素、事件发生的位置等。事件处理程序可以根据事件对象的信息来执行相应的操作。

事件传播：冒泡还是捕获

当事件在 DOM 元素上发生时，它会沿着 DOM 树向上传播，这种传播方式被称为事件冒泡。也就是说，事件会从最里层的元素开始，依次向上触发，直到到达根元素 html。

然而，除了事件冒泡之外，还有一种事件传播方式叫事件捕获。事件捕获与事件冒泡相反，它会从根元素 html 开始，依次向下触发，直到到达最里层的元素。

巧用事件代理：提升性能

在实际开发中，我们经常会遇到这样的场景：需要给多个元素绑定同一个事件处理程序。如果我们逐个绑定事件处理程序，会导致代码冗余，影响性能。

这时，我们可以使用事件代理来优化代码。事件代理是指把事件处理程序绑定到父元素上，然后在事件处理程序中判断事件发生在哪个子元素上。这样，当子元素发生事件时，事件会先冒泡到父元素，然后父元素的事件处理程序会根据事件对象的信息来执行相应的操作。

代码示例

以下是使用事件代理给多个元素绑定点击事件的代码示例：

<div class="parent">
  <button class="child1">按钮 1</button>
  <button class="child2">按钮 2</button>
  <button class="child3">按钮 3</button>
</div>

// 给父元素绑定点击事件处理程序
document.querySelector(".parent").addEventListener("click", (e) => {
  // 判断事件发生在哪个子元素上
  const targetElement = e.target;
  if (targetElement.classList.contains("child1")) {
    // 执行操作 1
  } else if (targetElement.classList.contains("child2")) {
    // 执行操作 2
  } else if (targetElement.classList.contains("child3")) {
    // 执行操作 3
  }
});