HTML DOM 中的事件是指在页面上发生的各种交互行为，例如点击鼠标、键盘输入等。事件捕获和事件冒泡是两种常见的事件传播方式。
事件冒泡是指当一个元素上的事件被触发时，该事件会沿着 DOM 树向父级元素依次传播，直到传播到文档根节点或者被阻止。在大多数情况下，事件冒泡是默认的传播方式。
但是，并不是所有的事件都会冒泡。本文将详细介绍哪些事件不会冒泡以及如何处理这些事件。
不冒泡的事件列表
以下是 HTML DOM 中不冒泡的事件列表：
focusblurloadunloadresizescroll
这些事件不会冒泡到其父级元素。
示例代码
下面是一个示例代码，演示了如何使用 JavaScript 捕获不冒泡的事件：
-- -------------------- ---- -------
--------- -----
------
------
---------------------
-------
------
---- ------------
---- -----------
------- --------------------------
------
------
--------
-- ----
----- ------ - ----------------------------------
----- ----- - ---------------------------------
----- -------- - ------------------------------------
-- -------
-------------------------------- -------- -- -
------------------- ----------
---
------------------------------- -------- -- -
------------------ ----------
---
---------------------------------- -------- -- -
------------------- ----------
-- ------ -- -----------------
--------------------------------- -------- -- -
------------------- ----------
-- ------
------------------------------- -------- -- -
----------------- ---------
-- ------
--------------------------------- -------- -- -
----------------- -----------
-- ------
---------
-------
-------在上面的代码中，我们使用 addEventListener 方法为元素添加了多个事件监听器。其中，myButton 元素上的 focus 和 blur 事件是使用捕获模式添加的。
当按钮被聚焦或失焦时，控制台将分别输出以下信息：
button focused button blurred
这说明这两个事件确实没有冒泡到其父级元素。
指导意义
了解哪些事件不会冒泡对于正确处理事件非常重要。在开发过程中，有时候需要在父级元素上添加事件监听器来管理子元素中的事件。但是如果所添加的事件是不冒泡的事件，那么它将无法到达父级元素，从而导致无法正常处理事件。
此外，还需要注意的是，使用捕获模式添加事件监听器可以确保在事件到达目标元素之前就被触发，从而提供更好的控制和可预测性。
因此，在开发过程中，应该仔细阅读文档以了解所使用的事件是否冒泡，并根据需要选择适当的事件传播方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30738