解释 Javascript 中的事件冒泡和事件捕获：如何利用？

已发表: 2020-03-26

目录

介绍

JavaScript 中用于事件流的两个非常常见的术语是事件冒泡和事件捕获。

这是事件在 HTML DOM API 中传播的两种重要方式，当两个元素都为事件注册句柄并且事件发生在嵌套在另一个元素中的元素中时。 元素接收事件的顺序由事件传播的模式决定。 继续阅读以了解 JavaScript 中事件冒泡和事件捕获的使用，以及为什么在网页开发中需要这些。

关键要点

  • 解释术语事件、事件流、事件处理程序和事件侦听器
  • JavaScript 中的事件冒泡和事件捕获
  • JavaScript中事件冒泡和事件捕获的实用程序

事件和事件流

HTML 网页与 JavaScript 的交互是由用户或浏览器操作页面时发生的事件介导的。 页面的加载、用户单击按钮、关闭窗口都是事件的示例。

在网页上接收事件的顺序称为事件流。 事件流的过程分三个步骤完成——事件捕获（拦截事件）、事件定位（目标获取事件）和事件冒泡（响应事件）。

JavaScript 中的事件处理程序和事件侦听器

事件处理程序是编写在 HTML 标记内而不是 <script> 标记内的 JavaScript 代码。 事件处理程序在事件发生（例如按下按钮）时执行 JavaScript。 基本语法是： name_of_handler="JavaScript code here"

<a href=”https://www.google.com” onClick=”alert('hello!”)”>Goolge</a>

等待事件发生的过程是事件侦听器。 JavaScript 有一个内置函数addEventListener()，它接收要监听的事件，并在所述事件被触发时调用第二个参数。 语法是： element.addEventListener(event, listener);

JavaScript 中的事件冒泡

事件冒泡是使用 JavaScript 开发网页或 Web 应用程序时遇到的常见术语。 事件冒泡是事件流动过程中的一个阶段，当事件从 DOM 中最具体的元素或嵌套最深的节点开始，然后向上流向最不具体的节点，即文档。

资源

<!DOCTYPE HTML>
<html>
<头部>
<标题>……</标题>
</head>
<正文>
<div id=”demo”> 按这里。</div>
</正文>
</html>

单击元素 <div> 时，“单击”事件按以下顺序发生：

  1. <div>
  2. <正文>
  3. <html>
  4. 文档

'click' 事件触发元素 <div>。 随后沿着 DOM 树向上触发每个节点，直到到达对象文档。

阅读：全栈项目理念和主题

JavaScript 中的事件捕获

事件捕获是事件流中的另一种模型，最初由 Netscape 浏览器引入。 如该模型所述，事件首先由最不具体的节点接收，而最具体的节点或嵌套最深的元素最后接收事件。 在此模型中，事件在到达实际目标之前被拦截。 然而，与事件冒泡不同，现代浏览器缺乏对这种模型的支持，因此事件捕获只能在特定情况下使用。

资源

参考上一节中所述的示例，单击元素 <div> 会按以下顺序触发事件“click”：

  1. 文档
  2. <正文>
  3. <html>
  4. <div>

事件捕获阶段会发生什么？

在事件捕获阶段，将调用其值注册为“true”的捕获器侦听器。 它是按以下方式编写的：

el.addEventListener('点击', 监听器, true)

这里捕获了一个事件，因为监听器的值被注册为“true”。 如果没有值，则默认值为“false”，结果是未捕获事件。 因此，在这个阶段，只有具有真实值的事件才会被调用并被捕获。 在随后的目标阶段，所有注册的侦听器都会被调用，无论它们的值是注册为真还是假。

JavaScript 中的 DOM 事件流

DOM Level 2 为事件流模型指定了三个阶段：

  • 事件捕获阶段
  • 在目标
  • 事件冒泡阶段

资源

如果有机会拦截事件，则首先发生事件捕获。 接下来是获取事件的实际目标。 最终，在事件冒泡阶段，对事件的最终响应发生。 参考上一节中所述的示例，单击元素 <div> 会按照上图所示的顺序触发事件“click”。

阅读：印度的全栈开发人员薪水

JavaScript中事件冒泡和事件捕获的实用程序

在事件冒泡阶段，仅调用标志值为“false”（非捕获者）的事件。 事件冒泡和事件捕获是 DOM 的重要方面。

el.addEventListener('Click', listener, false) // 监听器不捕获
el.addEventListener('Click', listener) // 监听器不捕获

上面的代码举例说明了冒泡和捕获阶段是如何工作的。 每个事件都没有达到目标。 有些事件没有冒泡并在目标阶段后停止。 冒泡事件并非适用于所有类型的事件，侦听器除了具有一些其他属性，例如-e.target（引用事件的目标）和e.eventPhase（当前侦听器在此模式下注册）。

结论

JavaScript 中的事件流具有三个重要阶段——事件捕获阶段、目标阶段和事件冒泡阶段。 事件捕获是第一个发生的，如果需要，事件被截获。 随后是事件达到实际目标，最后阶段是冒泡，此时对事件的最终响应发生。 因此，可以适当地得出结论，JavaScript 中的事件冒泡和事件捕获是事件处理程序和事件委托所依赖的基础。

如果您有兴趣了解有关全栈的更多信息，请查看 upGrad 和 IIIT-B 的全栈软件开发 PG 文凭，该文凭专为在职专业人士设计，提供 500 多个小时的严格培训、9 个以上的项目和作业，IIIT- B 校友身份、实用的实践顶点项目和顶级公司的工作协助。

踏上梦想的工作

升级和 IIIT-BANGALORE 的软件开发 PG 文凭
了解更多@ upGrad