【JavaScript】DOM事件的传播机制

2023-12-28 16:39:09

? 专栏介绍

在现代Web开发中,JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性,还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言,JavaScript具有广泛的应用场景,并且不断发展演进。在本专栏中,我们将深入学习JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。让我们一起开始JavaScript之旅吧!

在这里插入图片描述


在这里插入图片描述

引言

DOM事件的传播机制是指当一个事件在DOM树中触发时,它是如何在各个元素之间传播的。DOM事件传播机制分为三个阶段:捕获阶段、目标阶段和冒泡阶段。此外,还有一种常用的技术称为事件委托,它能够简化事件处理程序的绑定和管理。本文将详细介绍这些概念,并提供相应的代码示例。

事件与事件流

在介绍事件传播机制之前,我们先来了解一下什么是事件和事件流。在DOM中,事件是指用户与页面交互时发生的动作,比如点击、鼠标移动等。而事件流则是指这些事件在DOM树中传播的路径。

每次用户与一个网页进行交互,例如点击链接,按下一个按键或者移动鼠标时,就会触发一个事件。我们的程序可以检测这些事件,然后对此作出响应。从而形成一种交互。

这样可以使我们的页面变得更加的有意思,而不仅仅像以前一样只能进行浏览。

JavaScript 中采用一个叫做事件监听器的东西来监听事件是否发生。这个事件监听器类似于一个通知,当事件发生时,事件监听器会让我们知道,然后程序就可以做出相应的响应。

通过这种方式,就可以避免让程序不断地去检查事件是否发生,让程序在等待事件发生的同时,可以继续做其他的任务。

标准 DOM 事件流

DOM事件流是指在DOM树中,事件从最外层的节点开始传播,逐级向下,直到达到目标节点,然后再从目标节点向上传播到最外层的节点。

DOM事件流分为三个阶段:捕获阶段、目标阶段和冒泡阶段。

  1. 捕获阶段:事件从最外层的节点开始传播,逐级向下,直到达到目标节点。在捕获阶段中,事件会依次触发每个经过的节点上绑定的捕获型事件处理函数。
  2. 目标阶段:事件达到目标节点后,在目标节点上触发绑定的事件处理函数。在这个阶段中,只会触发目标节点上绑定的事件处理函数。
  3. 冒泡阶段:事件从目标节点开始向上传播,逐级向上,直到达到最外层的节点。在冒泡阶段中,事件会依次触发每个经过的节点上绑定的冒泡型事件处理函数。

在实际应用中,默认情况下大部分DOM事件都是按照冒泡方式进行传播。但是也可以通过调用addEventListener方法时传入第三个参数为true来将其设置为捕获方式进行传播。

总结起来,DOM事件流就是指从最外层的节点开始传播,逐级向下到达目标节点,然后再从目标节点向上传播到最外层的节点的过程。这个过程分为捕获阶段、目标阶段和冒泡阶段。

下面是一个示例,演示了标准 DOM 事件流的传播顺序:

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('外层元素被点击');
}, true);

inner.addEventListener('click', function() {
  console.log('内层元素被点击');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击');
});

当我们点击按钮时,控制台会输出以下内容:

外层元素被点击 内层元素被点击 按钮被点击

可以看到,事件首先在捕获阶段从外层元素开始传播,然后到达目标元素,最后在冒泡阶段从目标元素向上冒泡。

事件冒泡流

事件冒泡是指在DOM树中,事件从目标元素开始向上冒泡传播的过程。也就是说,在冒泡阶段,事件会依次触发父级元素的相同类型事件处理程序。

下面是一个示例,演示了事件冒泡的过程:

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('外层元素被点击');
});

inner.addEventListener('click', function() {
  console.log('内层元素被点击');
});

btn.addEventListener('click', function() {
  console.log('按钮被点击');
});

当我们点击按钮时,控制台会输出以下内容:

按钮被点击 内层元素被点击 外层元素被点击

可以看到,事件首先在目标元素上触发,然后在冒泡阶段依次触发父级元素的相同类型事件处理程序。

事件捕获流

事件捕获是指在DOM树中,事件从最外层的父级元素开始向下捕获传播的过程。也就是说,在捕获阶段,事件会依次触发父级元素的相同类型事件处理程序。

下面是一个示例,演示了事件捕获的过程:

<div id="outer">
  <div id="inner">
    <button id="btn">点击我</button>
  </div>
</div>
const outer = document.getElementById('outer');
const inner = document.getElementById('inner');
const btn = document.getElementById('btn');

outer.addEventListener('click', function() {
  console.log('外层元素被点击');
}, true);

inner.addEventListener('click', function() {
  console.log('内层元素被点击');
}, true);

btn.addEventListener('click', function() {
  console.log('按钮被点击');
});

当我们点击按钮时,控制台会输出以下内容:

外层元素被点击 内层元素被点击 按钮被点击

可以看到,事件首先在捕获阶段依次触发父级元素的相同类型事件处理程序,然后到达目标元素。

事件委托流

事件委托是一种常用的技术,它利用了事件冒泡的特性。通过在父级元素上绑定一个事件处理程序,可以监听子级元素触发的事件。这样一来,无论子级元素是已经存在的还是动态生成的,都可以通过父级元素来管理它们的事件。

下面是一个示例,演示了事件委托的过程:

<ul id="list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>
const list = document.getElementById('list');

list.addEventListener('click', function(event) {
  if (event.target.tagName === 'LI') {
    console.log('列表项被点击');
    console.log('触发事件的目标元素是:', event.target);
  }
});

当我们点击任意一个列表项时,控制台会输出以下内容:

列表项被点击 触发事件的目标元素是: <li>列表项1</li>

可以看到,通过在父级元素上绑定点击事件处理程序,我们可以捕获到子级元素触发的点击事件,并且可以获取到触发事件的目标元素。这样一来,无论我们添加或删除列表项,只需要在父级元素上绑定一个事件处理程序即可。

总结

通过以上介绍,我们了解了DOM事件传播机制的三个阶段:捕获阶段、目标阶段和冒泡阶段。此外,我们还学习了如何利用事件委托来简化事件处理程序的绑定和管理。掌握这些概念和技巧,能够帮助我们更好地处理和管理DOM中的各种交互事件。


😶 写在结尾

前端设计模式专栏

在这里插入图片描述
设计模式是软件开发中不可或缺的一部分,它们帮助我们解决了许多常见问题,并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中,我们介绍了所有的前端设计模式,包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式,并将其应用于实际项目中,我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式,写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

在这里插入图片描述

Vue.js是一款流行的JavaScript框架,用于构建用户界面。它采用了MVVM(Model-View-ViewModel)的架构模式,通过数据驱动和组件化的方式,使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中,我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面,并探索其强大的生态系统,如Vue Router和Vuex、Pinia。通过学习这些内容,你将能够成为一名熟练的Vue.js开发者,并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript(ES6)专栏

在这里插入图片描述

JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点,是构建现代Web应用程序的重要工具之一。在这个专栏中,我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外,我们还将介绍ES6(ECMAScript 2015)及其后续版本中引入的新特性,如箭头函数、模块化、解构赋值等。通过学习这些内容,你将能够成为一名熟练的JavaScript开发者,并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript(ES6)专栏

文章来源:https://blog.csdn.net/csdn9_14/article/details/135241788
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。