JS进阶DAY3|事件(二)事件流

目录

一、事件流说明

1.1 事件流概念

1.2 事件捕获阶段

1.3 事件冒泡阶段

二、事件传播的两个阶段说明

2.1 事件捕获

2.2 事件冒泡

3.3 示例代码

三、阻止冒泡

四、事件解绑

4.1 removeEventListener方法

4.2 使用 DOM0 级事件属性

4.3 使用一次性事件监听器


一、事件流说明

1.1 事件流概念

事件流(Event Flow)是指事件从发生到结束的整个过程。在Web浏览器中,事件流分为两个阶段:事件捕获阶段(Event Capturing Phase)和事件冒泡阶段(Event Bubbling Phase)。

1.2 事件捕获阶段

事件捕获阶段开始于根节点(通常是 document 对象),然后沿着DOM树向下传播到目标节点。在这个阶段,事件会经过所有的父节点,直到到达事件的实际目标(即触发事件的元素)。这意味着,如果你在父元素上注册了一个事件监听器,它会在冒泡到目标元素之前被触发。

1.3 事件冒泡阶段

事件冒泡阶段从事件的目标节点开始,然后向上传播到根节点。在这个阶段,事件会从目标元素开始,逐级向上经过其父元素,直到到达 document 对象。这是事件流的默认行为,也是大多数开发者所熟悉的。

二、事件传播的两个阶段说明

2.1 事件捕获

事件从文档根开始,沿DOM树向下至目标元素。

可以在此阶段设置监听器来拦截事件,阻止事件继续向下传播到目标元素。

在现代浏览器中,可以通过 addEventListener 的第三个参数设置为 true 来启用捕获阶段的监听。

2.2 事件冒泡

事件从目标元素开始,沿DOM树向上至文档根。

这是大多数事件监听器工作的地方,也是默认的事件传播方式。

可以通过 addEventListener 的第三个参数设置为 false (或不设置)来监听冒泡阶段的事件。

3.3 示例代码

// 事件捕获阶段监听

document.getElementById('parent').addEventListener('click', function(event) {

  console.log('捕获阶段 - 父元素');

}, true);



// 事件冒泡阶段监听

document.getElementById('child').addEventListener('click', function(event) {

  console.log('冒泡阶段 - 子元素');

});

如果 child 元素被点击,事件首先在捕获阶段触发 parent 元素的监听器,然后事件到达 child 元素,并在冒泡阶段触发 child 元素的监听器。如果需要在捕获阶段监听事件,需要在 addEventListener 中将第三个参数设置为 true 。

三、阻止冒泡

当在事件处理函数中调用 event.stopPropagation() ,可以阻止事件继续冒泡到父元素。

const childElement = document.getElementById('child');

childElement.addEventListener('click', function(event) {

  event.stopPropagation(); // 阻止事件冒泡

  console.log('点击事件在子元素处理,不会传播到父元素');

});

四、事件解绑

事件解绑,即移除事件监听器,可以通过以下几种方法实现:

4.1 removeEventListener方法

const element = document.getElementById('myElement');

const handlerFunction = function(event) {

  console.log('事件被触发');

};

// 添加事件监听器

element.addEventListener('click', handlerFunction);

// 移除事件监听器

element.removeEventListener('click', handlerFunction);

注意

  1. 确保函数引用相同:传递给  addEventListener  和  removeEventListener  的函数引用必须完全相同。
  2. 捕获与冒泡:如果使用事件捕获添加的监听器,解绑时也需要使用相同的捕获选项。

4.2 使用 DOM0 级事件属性

对于通过直接赋值给事件属性添加的事件监听器(DOM0级事件处理),可以通过将事件属性设置为  null  或一个空函数来“解绑”事件。

const element = document.getElementById('myElement');

// 添加事件监听器(DOM0级)

element.onclick = function(event) {

  console.log('点击事件被触发');

};

// “解绑”事件监听器(DOM0级)

element.onclick = null; // 或者 element.onclick = function() {};

4.3 使用一次性事件监听器

通过在  addEventListener  的选项中设置  { once: true } ,可以添加一个只触发一次的事件监听器,该监听器在触发后自动解绑。

const element = document.getElementById('myElement');

// 添加一次性事件监听器

element.addEventListener('click', function(event) {

  console.log('点击事件被触发一次');

}, { once: true });

这种监听器在触发一次后自动解绑,无需手动移除。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【AI工具】强大的AI编辑器Cursor详细使用教程

目录 一、下载安装与注册 二、内置模型与配置 三、常用快捷键 四、项目开发与问答 五、注意事项与技巧 参考资料 近日,由四名麻省理工学院(MIT)本科生共同创立的Anysphere公司宣布,其开发的AI代码编辑器Cursor在成立短短两年…

【AWR软件】AWR 软件添加电磁结构

文章目录 前言步骤 前言 微波虚拟 实验 步骤 project -> add em struture -> new em structure 输入名称,create. 添加端口:add edge port

uni-app登录界面样式

非常简洁的登录、注册界面模板&#xff0c;使用uni-app编写&#xff0c;直接复制粘贴即可&#xff0c;无任何引用&#xff0c;全部公开。 废话不多说&#xff0c;代码如下&#xff1a; login.vue文件 <template><view class"screen"><view class"…

普通算法——一维前缀和

一维前缀和 题目链接&#xff1a;https://www.acwing.com/problem/content/797/ 题目描述&#xff1a; 输入一个长度为 n 的整数序列。接下来再输入 m 个询问&#xff0c;每个询问输入一对 l,r。对于每个询问&#xff0c;输出原序列中从第 l 个数到第 r 个数的和。 **什么是…

小程序项目的基本组成结构

分类介绍 项目根目录下的文件及文件夹 pages文件夹 用来存放所有小程序的页面&#xff0c;其中每个页面都由4个基本文件组成&#xff0c;它们分别是&#xff1a; .js文件&#xff1a;页面的脚本文件&#xff0c;用于存放页面的数据、事件处理函数等 .json文件&#xff1a;…

【Go 基础】并发相关

并发相关 CAS CAS算法&#xff08;Compare And Swap&#xff09;&#xff0c;是原⼦操作的⼀种,&#xff0c;CAS 算法是⼀种有名的⽆锁算法。⽆锁编程&#xff0c;即不使⽤锁的情况下实现多线程之间的变量同步。可⽤于在多线程编程中实现不被打断的数据交换操作&#xff0c;从…

【H2O2|全栈】Node.js与MySQL连接

目录 前言 开篇语 准备工作 初始配置 创建连接池 操作数据库 封装方法 结束语 前言 开篇语 本节讲解如何使用Node.js实现与MySQL数据库的连接&#xff0c;并将该过程进行函数封装。 与基础部分的语法相比&#xff0c;ES6的语法进行了一些更加严谨的约束和优化&#…

基于人工智能的新中高考综合解决方案

1. 引言 近年来&#xff0c;随着人工智能技术的飞速发展&#xff0c;教育领域也迎来了深刻的变革。针对新中高考改革的需求&#xff0c;本解决方案集成了科大讯飞在人工智能领域的核心技术&#xff0c;旨在通过智能化手段提升教育教学效率与质量&#xff0c;助力学生全面发展。…

【Linux基础】yum 与 vim 的操作

目录 Linux 应用商店——yum yum和yum源是什么 关于镜像的简单理解 yum 的基本操作 yum的安装 yum install 命令 yum查看软件包 yum list 命令 yum的卸载 yum remove 命令 关于 rzsz 软件 安装 rzsz 软件&#xff1a; rz 命令 sz 命令 yum 源拓展 Linux 编辑器…

Elasticsearch数据迁移(快照)

1. 数据条件 一台原始es服务器&#xff08;192.168.xx.xx&#xff09;&#xff0c;数据迁移后的目标服务器&#xff08;10.2.xx.xx&#xff09;。 2台服务器所处环境&#xff1a; centos7操作系统&#xff0c; elasticsearch-7.3.0。 2. 为原始es服务器数据创建快照 修改elas…

【MySQL】数据类型的注意点和应用

&#x1f4e2;博客主页&#xff1a;https://blog.csdn.net/2301_779549673 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01; &#x1f4e2;本文由 JohnKi 原创&#xff0c;首发于 CSDN&#x1f649; &#x1f4e2;未来很长&#…

首次打开韦东山提供的Ubuntu-18.04镜像后,该做哪些事?

目录 01-测试有无网络02-配置最基本的嵌入式开发环境(安装tftp-nfs等)03-缩短关机强制结束进行时间04-关闭软件的自动更新05-未完待续... 01-测试有无网络 ping www.baidu.com 02-配置最基本的嵌入式开发环境(安装tftp-nfs等) 需要安装 tftp&#xff0c;nfs&#xff0c;vim …

2030. gitLab A仓同步到B仓

文章目录 1 A 仓库备份 到 B 仓库2 B 仓库修改main分支的权限 1 A 仓库备份 到 B 仓库 #!/bin/bash# 定义变量 REPO_DIR"/home/xhome/opt/git_sync/zz_xx_xx" # 替换为你的本地库A的实际路径 REMOTE_ORIGIN"http://192.168.1.66:8181/zzkj_software/zz_xx_xx.…

Python与C++混合编程的优化策略与实践

在现代软件开发中&#xff0c;混合编程已成为一种普遍的开发模式。这种模式能够充分发挥不同编程语言的优势&#xff0c;实现性能与开发效率的最佳平衡。本文将深入探讨Python和C混合编程的策略与实践经验。 混合编程就像建造一座现代化的大厦&#xff0c;C就像大厦的钢筋混凝…

【kettle】mysql数据抽取至kafka/消费kafka数据存入mysql

目录 一、mysql数据抽取至kafka1、表输入2、json output3、kafka producer4、启动转换&#xff0c;查看是否可以消费 二、消费kafka数据存入mysql1、Kafka consumer2、Get records from stream3、字段选择4、JSON input5、表输出 一、mysql数据抽取至kafka 1、表输入 点击新建…

INS风格户外风光旅拍人像自拍摄影Lr调色教程,手机滤镜PS+Lightroom预设下载!

调色教程 户外风光旅拍人像自拍摄影结合 Lightroom 调色&#xff0c;可以打造出令人惊艳的视觉效果。这种风格将自然风光与人像完美融合&#xff0c;强调色彩的和谐与氛围感的营造。 预设信息 调色风格&#xff1a;INS风格预设适合类型&#xff1a;人像&#xff0c;户外&…

【burp】burpsuite基础(八)

Burp Suite基础&#xff08;八&#xff09; 声明&#xff1a;该笔记为up主 泷羽的课程笔记&#xff0c;本节链接指路。 警告&#xff1a;本教程仅作学习用途&#xff0c;若有用于非法行为的&#xff0c;概不负责。 ip伪装 安装组件jython 下载好后&#xff0c;在burp中打开扩展…

《船舶物资与市场》是什么级别的期刊?是正规期刊吗?能评职称吗?

问题解答 问&#xff1a;《船舶物资与市场》是不是核心期刊&#xff1f; 答&#xff1a;不是&#xff0c;是知网收录的正规学术期刊。 问&#xff1a;《船舶物资与市场》级别&#xff1f; 答&#xff1a;国家级。主管单位&#xff1a;中国船舶集团有限公司 主办单…

【电子通识】案例:USB Type-C USB 3.0线缆做直通连接器TX/RX反向

【电子通识】案例:连接器接线顺序评估为什么新人总是评估不到位?-CSDN博客这个文章的后续。最近在做一个工装项目,需要用到USB Type-C线缆做连接。 此前已经做好了线序规划,结果新人做成实物后发现有的USB Type-C线缆可用,有的不行。其中发现USB3.0的TX-RX信号与自己的板卡…

Antd X : 迅速搭建 AI 页面的解决方案

前言 随着 AI 热度的水涨船高&#xff0c;越来越多的 AI 应用如井喷式爆发&#xff0c;那么如何迅速搭建一个 AI 应用的美观高质量 Web 前端页面呢&#xff0c; Antd 团队给出了一个解决方案。 X Ant DesIgn XAI 体验新秩序Ant Design 团队匠心呈现 RICH 设计范式&#xff0…