17-理解JavaScript中的事件捕获和事件冒泡

笔记+分享

在现代Web开发中,事件处理是一个至关重要的部分。JavaScript中的事件模型包括两个主要的阶段:事件捕获和事件冒泡。理解这两个概念有助于我们更好地控制事件的行为,进而编写更高效的代码。本文将详细介绍事件捕获和事件冒泡的概念、区别及其在实际开发中的应用。

事件捕获与事件冒泡的概念

事件捕获(Event Capturing)

事件捕获是事件传播的第一阶段。在这个阶段,事件从最外层的祖先元素开始,一层层向下传播到目标元素。捕获阶段的目标是寻找合适的事件处理程序,确保事件在抵达目标元素之前可以被处理。

事件冒泡(Event Bubbling)

事件冒泡是事件传播的第二阶段。在这个阶段,事件从目标元素开始,一层层向上传播到最外层的祖先元素。冒泡阶段的目标是允许更高层的元素有机会处理事件。

事件传播的具体过程

当一个事件触发时,它会经历三个阶段:

  1. 捕获阶段:事件从最外层祖先元素开始向目标元素传播。
  2. 目标阶段:事件到达目标元素。
  3. 冒泡阶段:事件从目标元素向最外层祖先元素传播。

这三个阶段共同构成了事件的完整传播路径。

如何在JavaScript中处理事件捕获和事件冒泡

在JavaScript中,我们可以通过addEventListener方法来为元素添加事件处理程序。这个方法可以接收三个参数:事件类型、事件处理函数和一个可选的布尔值参数,用于指定事件处理程序是在捕获阶段还是冒泡阶段执行。

element.addEventListener(type, listener, useCapture);
  • type:事件类型,如'click'
  • listener:事件处理函数。
  • useCapture:可选参数,默认值为false。如果为true,事件处理程序将在捕获阶段执行;如果为false,事件处理程序将在冒泡阶段执行。
示例代码

以下是一个简单的示例,演示事件捕获和事件冒泡的区别:

HTML结构:

<div id="outer"><div id="inner">Click me</div>
</div>

JavaScript代码:

const outer = document.getElementById('outer');
const inner = document.getElementById('inner');outer.addEventListener('click', () => {console.log('Outer div clicked (capture)');
}, true);inner.addEventListener('click', () => {console.log('Inner div clicked (capture)');
}, true);inner.addEventListener('click', () => {console.log('Inner div clicked (bubble)');
}, false);outer.addEventListener('click', () => {console.log('Outer div clicked (bubble)');
}, false);

在这个示例中,当点击inner元素时,控制台输出如下:

Outer div clicked (capture)
Inner div clicked (capture)
Inner div clicked (bubble)
Outer div clicked (bubble)

可以看到,事件先在捕获阶段触发outer的处理程序,然后触发inner的处理程序。接着进入冒泡阶段,先触发inner的处理程序,最后触发outer的处理程序。

阻止事件传播

有时我们可能希望在某个阶段停止事件的传播,可以使用以下方法:

  • event.stopPropagation():停止事件在捕获和冒泡阶段的传播。
  • event.stopImmediatePropagation():不仅停止事件的传播,还阻止当前元素上其他事件处理程序的执行。

示例代码:

inner.addEventListener('click', (event) => {console.log('Inner div clicked (bubble)');event.stopPropagation(); // 停止事件传播
}, false);outer.addEventListener('click', () => {console.log('Outer div clicked (bubble)');
}, false);

点击inner元素时,控制台只输出:

Inner div clicked (bubble)

事件捕获和冒泡的应用场景

  • 事件捕获:适用于需要在事件到达目标元素之前进行处理的场景。例如,页面级的点击统计,可以在捕获阶段处理所有点击事件。
  • 事件冒泡:适用于事件委托。在父元素上监听子元素的事件,可以提高性能,减少内存消耗。

结论

理解事件捕获和事件冒泡是掌握JavaScript事件模型的关键。通过合理地使用这两种机制,我们可以更高效地处理事件,编写更具响应性的Web应用。在实际开发中,结合stopPropagationstopImmediatePropagation方法,可以进一步控制事件的传播,满足各种复杂的业务需求

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/17418.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【笔记】企业架构TOGAF 10的架构从4A增加至6A

背景 谈谈学习TOGAF 10的总结和笔记&#xff0c;说说较9.2版本有哪些变化。最直观的当属从原来的4A架构升级到6A架构&#xff0c;单独从原来的4A中提炼形成了安全架构、系统架构两个概念&#xff0c;谈谈理解并回顾总结一下学习笔记。 TOGAF 10 将安全架构单独列为一种架构&…

AI写作(十)发展趋势与展望(10/10)

一、AI 写作的崛起之势 在当今科技飞速发展的时代&#xff0c;AI 写作如同一颗耀眼的新星&#xff0c;迅速崛起并在多个领域展现出强大的力量。 随着人工智能技术的不断进步&#xff0c;AI 写作在内容创作领域发挥着越来越重要的作用。据统计&#xff0c;目前已有众多企业开始…

【模块一】kubernetes容器编排进阶实战之资源管理核心概念

kubernetes 资源管理核心概念 k8s的设计理念—分层架构 CRI-container runtime interface-容器运行接口 CNI-container network interface-容器网络接口 CSI-container storage interface-容器存储接口 k8s的设计理念—API设计原则 https://www.kubernetes.org.cn/kubernete…

DBeaver中PostgreSQL数据库显示不全的解决方法

本文介绍在DBeaver中&#xff0c;连接PostgreSQL后&#xff0c;数据库显示不全的解决方法。 最近&#xff0c;在DBeaver中连接了本地的PostgreSQL数据库。但是连接后打开这个数据库时发现&#xff0c;其所显示的Databases不全。如下图所示&#xff0c;Databases只显示了一个pos…

ElasticSearch学习笔记二:使用Java客户端

一、前言 在上一篇文章中&#xff0c;我们对ES有了最基本的认识&#xff0c;本着实用为主的原则&#xff0c;我们先不学很深的东西&#xff0c;今天打算先学习一下ES的Java客户端如何使用。 二、创建项目 1、普通Maven项目 1、创建一个Maven项目 2、Pom文件 <dependenc…

MySQL8 安装教程

一、从官网下载mysql-8.0.18-winx64.zip安装文件&#xff08; 从 https://dev.mysql.com/downloads/file/?id484900 下载zip版本安装包 mysql-8.0.18-winx64.zip 解压到本地磁盘中&#xff0c;例如解压到&#xff1a;D盘根目录&#xff0c;并改名为MySQL mysql-8.0.34-winx6…

如何将LiDAR坐标系下的3D点投影到相机2D图像上

将激光雷达点云投影到相机图像上做数据层的前融合&#xff0c;或者把激光雷达坐标系下标注的物体点云的3d bbox投影到相机图像上画出来&#xff0c;都需要做点云3D点坐标到图像像素坐标的转换计算&#xff0c;也就是LiDAR 3D坐标转像素坐标。 看了网上一些文章都存在有错误或者…

【Pikachu】XML外部实体注入实战

若天下不定&#xff0c;吾往&#xff1b;若世道不平&#xff0c;不回&#xff01; 1.XXE漏洞实战 首先写入一个合法的xml文档 <?xml version "1.0"?> <!DOCTYPE gfzq [<!ENTITY gfzq "gfzq"> ]> <name>&gfzq;</name&…

游戏引擎学习第13天

视频参考:https://www.bilibili.com/video/BV1QQUaYMEEz/ 改代码的地方尽量一张图说清楚吧,懒得浪费时间 game.h #pragma once #include <cmath> #include <cstdint> #include <malloc.h>#define internal static // 用于定义内翻译单元内部函数 #…

(一)Ubuntu20.04服务器端部署Stable-Diffusion-webui AI绘画环境

一、说明 cup型号&#xff1a; Intel(R) Celeron(R) CPU G1610 2.60GHz 内存大小&#xff1a; 7.5Gi 356Mi 4.6Gi 1.0Mi 2.6Gi 6.8Gi Swap: 4.0Gi 0B 4.0Gi 显卡型号&#xff1a;NVIDIA P104-100 注意&#xff1a…

Python Tornado框架教程:高性能Web框架的全面解析

Python Tornado框架教程&#xff1a;高性能Web框架的全面解析 引言 在现代Web开发中&#xff0c;选择合适的框架至关重要。Python的Tornado框架因其高性能和非阻塞I/O特性而备受青睐。它特别适合处理大量并发连接的应用&#xff0c;比如聊天应用、实时数据处理和WebSocket服务…

ubuntu20.04安装anaconda

在anaconda的官网&#xff08;Anaconda | The Operating System for AI&#xff09;或者清华镜像源网站&#xff08;Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror&#xff09;中下载对应的anaconda版本 可以在网页直接下载或者通过命…

平衡二叉搜索树之 红黑 树的模拟实现【C++】

文章目录 红黑树的简单介绍定义红黑树的特性红黑树的应用 全部的实现代码放在了文章末尾准备工作包含头文件类的成员变量和红黑树节点的定义 构造函数和拷贝构造swap和赋值运算符重载析构函数findinsert【重要】第一步&#xff1a;按照二叉搜索树的方式插入新节点第二步&#x…

【设计模式】行为型模式(四):备忘录模式、中介者模式

行为型模式&#xff08;四&#xff09;&#xff1a;备忘录模式、中介者模式 7.备忘录模式&#xff08;Memento&#xff09;7.1 通俗易懂的解释7.2 具体步骤7.3 代码示例7.3.1 定义发起人7.3.2 定义备忘录7.3.3 定义管理者7.3.4 客户端7.3.5 输出 7.4 总结 8.中介者模式&#xf…

Thinkpad E15 在linux下升级 bios

安装xubuntu 24.04后&#xff0c;发现键盘的Fn按键全都无法使用&#xff0c;在Windows环境下是正常的&#xff0c;按说是驱动的问题&#xff0c;网上也有说可以通过升级BIOS解决&#xff0c;所以打算升级看看&#xff0c;升级有风险。 参考&#xff1a; https://blog.stigok.c…

Java学习Day61:薄纱王灵官!(Nginx review)

1.Nginx是什么 Nginx是一款轻量级、高性能&#xff0c;并发性好的HTTP和反向代理服务器 2.功能 2.1反向代理 正向代理是指客户端向代理服务器发送请求&#xff0c;代理服务器代表客户端去访问目标服务器。简单来说&#xff0c;正向代理是客户端的代理&#xff0c;客户端通过…

MATLAB用到的矩阵基础知识(矩阵的乘和矩阵的逆)

1. 矩阵乘法 方法: 设第一个矩阵为 A A A,第二个矩阵为 B B B,则 A A A的第一行乘 B B B的第一列,先想乘再相加,作为目标矩阵的一个元素。 前提条件: 所以我们可以看到矩阵相乘的前提条件:第一个矩阵的列数等于第二个矩阵的行数。否则,我们就无法进行行和列的相乘。 最…

Oracle OCP认证考试考点详解082系列22

题记&#xff1a; 本系列主要讲解Oracle OCP认证考试考点&#xff08;题目&#xff09;&#xff0c;适用于19C/21C,跟着学OCP考试必过。 105. 第105题&#xff1a; 题目 解析及答案&#xff1a; 题目翻译&#xff1a; 关于Oracle数据库中的事务请选择两个正确的陈述&#xf…

【ict基础软件赛道】真题-50%openGauss

题目取自赛前测试链接 OpenGauss安装前使用哪个工具检查环境是否符合安装哪个功能不是gs_guc工具提供的opengauss数据库逻辑复制的特点描述正确的是opengauss的全密态数据库等值查询能力描述正确的是哪个不属于ssh客户端工具opengauss三权分立说法正确的是opengauss wdr snapsh…