洞悉JavaScript事件流与委托技巧，点亮交互之灯

前端

2023-09-18 08:26:27

JavaScript事件概述

事件是JavaScript与HTML交互的桥梁。它可以是用户与网页的交互（如鼠标点击、键盘输入等），也可以是网页本身发出的事件（如页面加载完成、窗口调整大小等）。

JavaScript为我们提供了多种方式来侦听和处理事件。我们可以使用<addEventListener()>方法或onclick等HTML属性来预定事件，以便在事件发生时执行相应的代码。

事件流：理解事件传播的奥秘

事件流了事件在HTML文档中传播的顺序。当一个事件发生时，它会从目标元素开始，向上冒泡到父元素，直到到达文档的根元素<html>。

事件流分为两个阶段：

捕获阶段： 事件从目标元素开始，向上冒泡到父元素的顺序。
冒泡阶段： 事件从目标元素开始，向下冒泡到子元素的顺序。

我们可以在事件流的任何一个阶段添加侦听器，以捕获和处理事件。

事件委托：巧用父元素拦截事件

事件委托是一种事件处理技巧，它允许我们通过在父元素上添加侦听器，来捕获和处理子元素的事件。

事件委托有几个优势：

性能优化： 由于父元素只需要一个侦听器，而子元素则不需要，因此可以减少事件处理器的数量，从而提高性能。
代码简洁： 事件委托可以减少代码量，使代码更加简洁易读。
易于管理： 当子元素发生变化时，不需要修改父元素的事件处理程序，从而提高了代码的可维护性。

事件委托的实现

事件委托的实现很简单，只需在父元素上添加侦听器，并在侦听器中判断事件的目标元素是否为我们关心的元素即可。

const parentElement = document.querySelector('.parent-element');

parentElement.addEventListener('click', (event) => {
  if (event.target.classList.contains('child-element')) {
    // 执行操作
  }
});

上面的代码中，我们在父元素<parent-element>上添加了一个click事件侦听器。当父元素或其子元素发生点击事件时，该侦听器都会被触发。我们在侦听器中使用event.target属性来获取事件的目标元素，并判断其是否包含child-element类。如果包含，则执行相应的操作。