掌握 JavaScript 事件流的精髓：开启流畅交互新世界

前端

2023-10-21 17:53:56

JavaScript 事件流：了解网页中的交互秘诀

伙计们，准备好踏上 JavaScript 事件流的奇妙之旅吧！它就像一场交响乐，掌控着网页中的事件，让你的页面栩栩如生，交互无缝。让我们深入了解事件流的奥秘，揭开它如何让你的网页响应灵敏的秘密。

事件流中的关键角色：冒泡和捕获

在事件流的舞台上，有两大关键角色：冒泡和捕获。它们就像两位勤恳的侦探，密切关注着每个事件的踪迹。

冒泡： 当某个元素被点击时，它就像一颗小皮球，事件信号会向上传递，从子元素一路传播到父元素，直至顶层元素。这就像气泡不断向上冒一样，因此得名冒泡。
捕获： 捕获恰好相反，它从顶层元素开始，逐层向下传递，就像一位经验丰富的侦探，在事件发生前就已经开始搜查。当一个元素被点击时，侦探已经提前赶到，第一时间掌握了事件的踪迹。

用代码实现事件流

现在，让我们用代码来体验事件流的魔力：

document.querySelector('button').addEventListener('click', function(event) {
  console.log('冒泡：这个按钮被点击了');
}, false);

document.querySelector('body').addEventListener('click', function(event) {
  console.log('捕获：有人点击了页面中的某个元素');
}, true);

在上面的示例中，我们给按钮添加了一个点击事件监听器，它将在按钮被点击时记录一条消息到控制台。同时，我们还给 body 元素添加了一个事件监听器，它将在页面中的任何元素被点击时记录一条消息到控制台。

在浏览器中运行这段代码，你会发现当点击按钮时，控制台会先输出“冒泡：这个按钮被点击了”，然后输出“捕获：有人点击了页面中的某个元素”。这就是冒泡和捕获的实际运作方式。

事件代理：巧妙的事件监听器

事件流的另一个妙招是事件代理。它就像一个聪明的管家，可以让你在祖先元素上监听子元素的事件，从而简化事件处理。具体来说，就是当一个元素被点击时，祖先元素的事件监听器就会被触发。

document.querySelector('ul').addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('事件代理：列表项被点击了');
  }
}, false);

在这个示例中，我们给 ul 元素添加了一个点击事件监听器，它将在 ul 元素或其子元素被点击时触发。然后，我们检查 event.target 属性来确定被点击的元素是否为 li 元素。如果是，我们就记录一条消息到控制台。

这就是事件代理的基本原理。它可以让你用更少的代码来处理更多的事件，使你的代码更加简洁和高效。