SPA 应用中的事件处理及冒泡机制详解-JavaScript中文网-JavaScript教程资源分享门户

单页应用程序（SPA）已经成为现代web开发的趋势。在SPA中，重新渲染整个页面的成本非常高，因此我们需要使用事件处理程序来创建一流的用户体验。本文将详细介绍SPA中事件处理程序及其冒泡机制的基础知识，以及一些实用技巧和最佳实践。

事件处理基础

当用户与页面上的元素交互时，会触发某些事件。JavaScript可以通过事件处理程序来响应这些事件，例如单击、悬停或键盘按键事件等。在 SPA 中，事件处理程序可能需要通过 AJAX 或 WebSocket 更新非部分页面，或者更新本地状态，并更新页面视图。

以下是JavaScript中的简单事件处理程序：

const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
  console.log('Button clicked');
});

首先我们找到了一个名为 btn 的元素。
然后使用 addEventListener 方法将click 事件的响应函数注册到 btn 元素。
当用户单击 btn 元素时，浏览器将触发单击事件，并执行注册的回调函数。

在SPA中，我们可能需要将事件处理程序注册到更多的元素上，同时还需要在复杂的 DOM 结构中进行事件委托。

事件委托

事件委托是通过在共同祖先元素上注册事件处理程序，以聚合所有事件处理的常用技术。此方法带来以下好处：

更少的内存占用。
动态生成的可交互元素不需要重新注册事件处理程序。
更快的页面加载时间。

以下示例说明了事件委托的工作原理：

<ul id="myList">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

const list = document.getElementById('myList');
list.addEventListener('click', (event) => {
    const target = event.target;
    if (target.tagName === 'LI') {
        console.log(target.innerHTML);
    }
});

在此示例中，我们使用了事件委托，并在祖先元素上注册了 click 事件。无论单击哪个列表项，都可以在单个处理程序中响应单击事件，并使用 target 获取其文本内容。

在上面的示例中，我们演示了如何使用 target 属性来检查被单击的目标是哪个元素。然而，在某些情况下，currentTarget 属性的使用可能更合适，在接下来的内容中我们将深入学习。

冒泡机制

在 SPA 中，事件委托甚至更强大，因为它利用了事件冒泡机制。以下是事件冒泡的简要说明：

当元素上发生事件时，事件将首先由元素本身处理。
如果事件未被处理，并且元素具有父元素，则该事件会在其父元素上重复执行。
该过程将继续到全局 window 对象，直到事件被处理或冒泡停止。

通过使用事件委托，我们可以轻松地使用事件冒泡机制并注册一个处理程序，以便我们可以从共同的祖先级别的元素中响应和处理事件。

以下示例说明了如何使用冒泡和事件委托：

<div id="container">
  <button>Click me!</button>
</div>

const container = document.querySelector('#container');

container.addEventListener('click', (event) => {
  if (event.target.tagName === 'BUTTON') {
    console.log('Button clicked');
  }
});

在此示例中，我们为祖先元素 #container 注册了 click 事件。该事件将在其子元素上触发，反复执行并向上传播事件，直到在 #container 元素上，被我们绑定的事件处理程序捕获到并响应。

在事件处理程序中，我们通过检查点击目标的标记名称来判断是否单击了我们想要的元素。

实用技巧

在本节中，我们将介绍一些事件处理程序的实用技巧以及一些最佳实践。

避免频繁的 DOM 操作

在事件处理程序中，可以避免频繁操作DOM，以提高性能。相反，我们可以使用变量将我们的操作延迟到适当的时候进行。

以下示例演示如何使用变量来减少操作数量：

-- -------------------- ---- -------
--- --------- - ------
----- ----- - --------------------------------

-------------------- -- -
  ------------------------------ -- -- -
    --------- - -----
  ---
---

-------------------------------- -- -- -
  -- ----------- -
    --------------- ---- ----------
    --------- - ------
  -
---

在此示例中，我们通过将 isClicked 变量设置为 true 来标记 li 元素的点击事件。在全局事件处理程序中，我们通过检查 isClicked 的值来知道是否发生了任何单击。

使用 `currentTarget`

currentTarget 属性是一个非常有用的属性，它在事件处理程序的上下文中引用当前元素。因此，无论是通过直接响应目标元素，还是使用事件委托和事件冒泡来处理事件，我们都可以使用此属性。

以下示例说明了 currentTarget 如何简化事件处理程序的编写方式：

const container = document.querySelector('#container');

container.addEventListener('click', (event) => {
    console.log(event.currentTarget.tagName);  // Displays "DIV"
});

在这个示例中，我们只是简单地输出了容器元素的标记名称，但是 currentTarget 属性结果是事件处理程序的当前元素。

取消事件

有时候我们需要取消默认事件或停止事件传播。这可以通过 preventDefault() 和 stopPropagation() 方法来实现。

const link = document.querySelector('a');

link.addEventListener('click', (event) => {
  event.preventDefault(); // 防止跳转
  event.stopPropagation(); // 阻止事件传播
});

在此示例中，我们使用 preventDefault() 和 stopPropagation() 方法来防止超链接点击时的跳转，以及停止事件冒泡。

结论

本文介绍了单页应用程序中使用事件处理程序的基础知识和冒泡机制。我们还介绍了有用的技巧和最佳实践，以帮助您更好地编写SPA 的事件处理代码。请记住，在任何情况下，我们都应该尽量避免使用不必要的 DOM 操作以提高性能并使我们的代码更简洁明了。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66fbd3b54471362601647322

SPA 应用中的事件处理及冒泡机制详解