探索JavaScript事件流：DOM中的神奇旅程

 🎬 江城开朗的豌豆：个人主页

 🔥 个人专栏 :《 VUE 》 《 javaScript 》

⛺️ 生活的理想，就是为了理想的生活 !

在这里插入图片描述

目录

引言

1. 事件流的发展流程

1.1 传统的DOM0级事件

1.2 DOM2级事件和addEventListener方法

1.3 W3C DOM3级事件

1.4 React与Virtual DOM

2. 事件流的属性

2.1 事件捕获阶段

2.2 目标阶段

2.3 事件冒泡阶段

2.4 事件对象

3. 事件流的应用场景

3.1 事件处理

3.2 事件代理

3.3 事件委托

4. 示例代码

引言

JavaScript中的事件流是一种机制，用于描述和处理事件在DOM树中的传播过程。了解事件流的属性和工作原理对于编写高效的事件处理代码和实现复杂的交互功能至关重要。本文将详细介绍JavaScript事件流的发展流程、属性以及应用场景，并提供一些代码示例和引用资料，帮助读者深入理解并应用这一重要的前端技术。

1. 事件流的发展流程

事件流在前端的发展过程中经历了一些变化和演进。下面简要介绍了事件流的发展历程：

1.1 传统的DOM0级事件

在早期的JavaScript中，事件处理是通过在DOM元素上直接定义事件处理属性来实现的，称为DOM0级事件。例如，可以通过为按钮元素的onclick属性赋值一个函数来定义点击事件的处理程序。

const button = document.getElementById('myButton');
button.onclick = function() {console.log('按钮被点击');
};

这种方式简单直接，但是有一个缺点是无法同时为一个元素的同一个事件类型添加多个处理程序。

1.2 DOM2级事件和addEventListener方法

随着DOM2级事件的引入，新增了addEventListener方法，提供了更强大和灵活的事件处理能力。addEventListener方法允许为一个元素的同一个事件类型添加多个处理程序，并且可以控制事件的捕获阶段。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {console.log('按钮被点击');
});

通过addEventListener方法，可以在一个元素上同时添加多个处理程序，而且可以使用removeEventListener方法移除指定的处理程序。

1.3 W3C DOM3级事件

W3C DOM3级事件进一步扩展了事件的类型和属性，引入了更多的事件类型和特性，以满足不断增长的前端开发需求。DOM3级事件规范定义了新的事件类型，如滚动事件、触摸事件、过渡事件等，以及一些新的事件属性和方法，提供更丰富的事件处理能力。

const element = document.getElementById('myElement');
element.addEventListener('scroll', function(event) {console.log('元素滚动事件');
});

DOM3级事件的引入丰富了事件处理的能力，使得开发者可以更灵活地响应各种类型的事件。

1.4 React与Virtual DOM

随着React等前端框架的出现，事件处理机制也发生了一些变化。React通过Virtual DOM的概念，将事件处理从直接操作DOM转移到组件层面进行管理。React利用了合成事件（

SyntheticEvent）来处理事件，实现了跨浏览器的一致性和性能优化。

在React中，事件处理程序是通过特定的语法和属性绑定到组件的，而不是直接操作DOM元素。

class MyComponent extends React.Component {handleClick() {console.log('按钮被点击');}render() {return <button onClick={this.handleClick}>点击按钮</button>;}
}

通过使用合成事件，React能够更高效地管理事件处理，并提供了更好的性能和开发体验。

2. 事件流的属性

事件流涉及到三个主要的概念：事件捕获阶段、目标阶段和事件冒泡阶段。了解这些阶段和相关的属性对于理解事件流的机制至关重要。

2.1 事件捕获阶段

事件捕获阶段是事件流的第一个阶段，从根节点开始向下传播到目标元素。在事件捕获阶段中，事件依次经过每个父元素，直到达到目标元素。

在事件捕获阶段，可以使用addEventListener的第三个参数指定事件处理程序在捕获阶段中执行。

element.addEventListener('click', handler, true);

2.2 目标阶段

目标阶段是事件流的第二个阶段，事件到达目标元素后被触发执行事件处理程序。

2.3 事件冒泡阶段

事件冒泡阶段是事件流的最后一个阶段，事件从目标元素开始向上冒泡，依次经过每个父元素，直到达到根节点。

在事件冒泡阶段，可以使用addEventListener的第三个参数设置为false或省略来指定事件处理程序在冒泡阶段中执行（默认值）。

element.addEventListener('click', handler, false);
// 或
element.addEventListener('click', handler);

2.4 事件对象

在事件处理程序中，可以通过事件对象访问和操作相关的事件信息。事件对象提供了一些属性和方法，可以获取事件的类型、目标元素、鼠标坐标等信息。

例如，可以通过事件对象的type属性获取事件类型：

element.addEventListener('click', function(event) {console.log(event.type); // 输出 'click'
});

3. 事件流的应用场景

事件流在前端开发中具有广泛的应用场景，下面介绍几个常见的应用场景：

3.1 事件处理

事件流提供了一种机制，用于处理和响应用户的交互操作。通过在目标元素上注册事件处理程序，可以捕获和处理用户触发的事件，实现交互功能。

例如，通过在按钮上注册click事件处理程序，可以

在按钮被点击时执行相应的代码逻辑。

const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {console.log('按钮被点击');
});

3.2 事件代理

事件代理（Event Delegation）是一种常见的优化技术，用于处理大量具有相似行为的子元素事件。通过在父元素上注册事件处理程序，可以利用事件冒泡机制，统一管理子元素的事件处理。

例如，可以在父元素上注册click事件处理程序，根据触发事件的具体子元素进行不同的操作。

const list = document.getElementById('myList');
list.addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('项目被点击');}
});

3.3 事件委托

事件委托是一种通过将事件处理委托给父元素来提高性能和简化代码的技术。它利用事件冒泡机制，在父元素上注册一个事件处理程序，处理多个子元素的相同事件。

例如，可以在父元素上注册click事件处理程序，根据触发事件的子元素的不同类别执行不同的操作。

const container = document.getElementById('myContainer');
container.addEventListener('click', function(event) {if (event.target.classList.contains('button')) {console.log('按钮被点击');} else if (event.target.classList.contains('link')) {console.log('链接被点击');}
});

4. 示例代码

下面是一些示例代码，演示了事件流的应用和相关的属性：

<button id="myButton">点击按钮</button>
<ul id="myList"><li>项目1</li><li>项目2</li><li>项目3</li>
</ul>
<div id="myContainer"><button class="button">按钮</button><a href="#" class="link">链接</a>
</div><script>// 事件处理示例const button = document.getElementById('myButton');button.addEventListener('click', function(event) {console.log('按钮被点击');});// 事件代理示例const list = document.getElementById('myList');list.addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('项目被点击');}});// 事件委托示例const container = document.getElementById('myContainer');container.addEventListener('click', function(event) {if (event.target.classList.contains('button')) {console.log('按钮被点击');} else if (event.target.classList.contains('link')) {console.log('链接被点击');}});
</script>

 

请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.

✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式

✅ 认为我部分代码过于老旧,可以提供新的API或最新语法

✅ 对于文章中部分内容不理解

✅ 解答我文章中一些疑问

✅ 认为某些交互,功能需要优化,发现BUG

✅ 想要添加新功能,对于整体的设计,外观有更好的建议

最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧

 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

黑马mysql教程笔记（mysql8教程）基础篇——数据库相关概念、mysql安装及卸载、数据模型、SQL通用语法及分类（DDL、DML、DQL、DCL）

黑马mysql教程笔记（mysql8教程）基础篇——数据库相关概念、mysql安装及卸载、数据模型、SQL通用语法及分类（DDL、DML、DQL、DCL）

参考文章1&#xff1a;https://www.bilibili.com/video/BV1Kr4y1i7ru/ 参考文章2&#xff1a;https://dhc.pythonanywhere.com/article/public/1/ 文章目录 基础篇数据库相关概念&#xff08;数据库DataBase&#xff08;DB&#xff09;、数据库管理系统DataBase Management Sy…
阅读更多...
解决Ubuntu18.04安装好搜狗输入法后无法打出中文的问题

解决Ubuntu18.04安装好搜狗输入法后无法打出中文的问题

首先下载安装 搜狗拼音输入法 &#xff0c;下载选择&#xff1a; x86_64 在ubuntu中设置 fcitx 最后发现安装好了&#xff0c;图标有了 &#xff0c;但是使用时不能输入中文&#xff0c;使用下面的命令解决&#xff1a; sudo apt install libqt5qml5 libqt5quick5 libqt5qu…
阅读更多...
学习笔记|串口通信的基础知识|同步/异步|常见的串口软件的参数|STC32G单片机视频开发教程（冲哥）|第二十集：串口通信基础

学习笔记|串口通信的基础知识|同步/异步|常见的串口软件的参数|STC32G单片机视频开发教程（冲哥）|第二十集：串口通信基础

目录 1.串口通信的基础知识串口通信(Serial Communication)同步/异步&#xff1f;全双工&#xff1f;常见的串口软件的参数 2.STC32的串口通信实现原理引脚选择模式选择 3.串口通信代码实现编写串口1通信程序测试 总结 1.串口通信的基础知识 百度百科&#xff1a;串口通信的概…
阅读更多...
【dp】背包问题

【dp】背包问题

背包问题 一、背包问题概述二、01背包问题&#xff08;1&#xff09;求这个背包至多能装多大价值的物品&#xff1f;&#xff08;2&#xff09;若背包恰好装满&#xff0c;求至多能装多大价值的物品&#xff1f; 三、完全背包问题&#xff08;1&#xff09;求这个背包至多能装多…
阅读更多...
抄写Linux源码(Day19：读取硬盘前的准备工作有哪些？)

抄写Linux源码(Day19：读取硬盘前的准备工作有哪些？)

回忆我们需要做的事情&#xff1a; 为了支持 shell 程序的执行&#xff0c;我们需要提供&#xff1a; 1.缺页中断(不理解为什么要这个东西&#xff0c;只是闪客说需要&#xff0c;后边再说) 2.硬盘驱动、文件系统 (shell程序一开始是存放在磁盘里的&#xff0c;所以需要这两个东…
阅读更多...
1.6.C++项目：仿muduo库实现并发服务器之channel模块的设计

1.6.C++项目：仿muduo库实现并发服务器之channel模块的设计

项目完整版在&#xff1a; 文章目录 一、channel模块&#xff1a;事件管理Channel类实现二、提供的功能三、实现思想&#xff08;一&#xff09;功能&#xff08;二&#xff09;意义&#xff08;三&#xff09;功能设计 四、代码&#xff08;一&#xff09;框架&#xff08;二…
阅读更多...
【Python从入门到进阶】38、selenium关于Chrome handless的基本使用

【Python从入门到进阶】38、selenium关于Chrome handless的基本使用

接上篇《37、selenium关于phantomjs的基本使用》 上一篇我们介绍了有关phantomjs的相关知识&#xff0c;但由于selenium已经放弃PhantomJS&#xff0c;本篇我们来学习Chrome的无头版浏览器Chrome Handless的使用。 一、Chrome Headless简介 Chrome Headless是一个无界面的浏览…
阅读更多...
Kaggle - LLM Science Exam(二）：Open Book QAdebertav3-large详解

Kaggle - LLM Science Exam(二）：Open Book QAdebertav3-large详解

文章目录 前言&#xff1a;优秀notebook介绍三、Open Book Q&A3.1 概述3.2 安装依赖&#xff0c;导入数据3.3 数据预处理3.3.1 处理prompt3.3.2 处理wiki数据 3.4 使用faiss搜索获取匹配的Prompt-Sentence Pairs3.5 查看context结果并保存3.6 推理3.6.1 加载测试集3.6.2 定…
阅读更多...
FFmpeg 基础模块：AVIO、AVDictionary 与 AVOption

FFmpeg 基础模块：AVIO、AVDictionary 与 AVOption

目录 AVIO AVDictionary 与 AVOption 小结 思考 我们了解了 AVFormat 中的 API 接口的功能&#xff0c;从实际操作经验看&#xff0c;这些接口是可以满足大多数音视频的 mux 与 demux&#xff0c;或者说 remux 场景的。但是除此之外&#xff0c;在日常使用 API 开发应用的时…
阅读更多...
低代码平台如何借助Nginx实现网关服务

低代码平台如何借助Nginx实现网关服务

摘要&#xff1a;本文由葡萄城技术团队于CSDN原创并首发。转载请注明出处&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。 前言 在典型的系统部署架构中&#xff0c;应用服务器是一种软件或硬件系统&#xff0c…
阅读更多...
在VS Code中优雅地编辑csv文件

在VS Code中优雅地编辑csv文件

文章目录 Rainbow csv转表格CSV to Tablecsv2tableCSV to Markdown Table Edit csv 下面这些插件对csv/tsv/psv都有着不错的支持&#xff0c;这几种格式的主要区别是分隔符不同。 功能入口/使用方法Rainbow csv按列赋色右键菜单CSV to Table转为ASCII表格指令CSV to Markdown …
阅读更多...
C++(反向迭代器)

C++(反向迭代器)

前言&#xff1a; 上一章我们介绍了适配器&#xff0c;也提了一下迭代器适配器&#xff0c;今天我们就从反向迭代器把迭代器适配器给解释一下。 既然 都叫迭代器容器了 就说名只要接口合适他可以封装实现各种容器需求包括vector list 。 目录 1.反向迭代器设计 1.1反向迭代…
阅读更多...
模型压缩部署概述

模型压缩部署概述

模型压缩部署概述 一&#xff0c;模型在线部署 1.1&#xff0c;深度学习项目开发流程 1.2&#xff0c;模型训练和推理的不同 二&#xff0c;手机端CPU推理框架的优化 三&#xff0c;不同硬件平台量化方式总结 参考资料 一&#xff0c;模型在线部署 深度学习和计算机视觉…
阅读更多...
windows 任务计划自动提交 笔记到github 、gitee

windows 任务计划自动提交 笔记到github 、gitee

一、必须有个git仓库托管到git上。 这个就不用说了&#xff0c;自己在github或者码云上新建一个仓库就行了。 二、创建自动提交脚本 这个bat脚本是在windows环境下使用的。 注意&#xff1a;windows定时任务下 调用自动提交git前&#xff0c;必须先进入该git仓库目录&#x…
阅读更多...
R语言实现竞争风险模型（1）

R语言实现竞争风险模型（1）

#竞争风险模型 tmp <- data.frame(gene tiaoxuan[,5:6],OS.Time Train[,"Survival_months"], OS Train[,"CSS"],stringsAsFactors F) colnames(tmp) #方法1&#xff1a;riskregression library(riskRegression) fgr1<-FGR(Hist(OS.Time,OS)~gen…
阅读更多...
法国乐天下单支付流程，自养号测评技术环境揭秘。

法国乐天下单支付流程，自养号测评技术环境揭秘。

Rakuten的前身是PriceMinister一家法国公司&#xff0c;经营电子商务网站PriceMinister&#xff0c;按访问量计算&#xff0c;该网站是法国第五大电子商务网站。2010年&#xff0c;它被乐天公司收购&#xff0c;2018年&#xff0c;它更名为Rakuten。乐天法国Rakuten France&…
阅读更多...
小谈设计模式（17）—状态模式

小谈设计模式（17）—状态模式

小谈设计模式&#xff08;17&#xff09;—状态模式 专栏介绍专栏地址专栏介绍 状态模式关键角色上下文(Context)抽象状态(State)具体状态(Concrete State) 核心思想Java程序实现首先&#xff0c;我们定义一个抽象状态类 State&#xff0c;其中包含一个处理请求的方法 handleRe…
阅读更多...
【开发篇】十七、消息：模拟订单短信通知

【开发篇】十七、消息：模拟订单短信通知

文章目录 1、消息2、JMS3、AMQP4、案例&#xff1a;模拟订单短信通知 相关文章&#xff1a; 【同步通讯与异步通讯】 1、消息 消息的发送方&#xff0c;即生产者。消息的接收方&#xff0c;即消费者。同步通信就行打视频&#xff0c;等着对方接电话才能继续往下&#xff0c;而…
阅读更多...
微服务moleculer03

微服务moleculer03

1. Moleculer 目前支持SQLite&#xff0c;MySQL&#xff0c;MariaDB&#xff0c;PostgreSQL&#xff0c;MSSQL等数据库&#xff0c;这里以mysql为例 2. package.json 增加mysql依赖 "mysql2": "^2.3.3", "sequelize": "^6.21.3", &q…
阅读更多...
Dijkstra 邻接表表示算法 | 贪心算法实现--附C++/JAVA实现源码

Dijkstra 邻接表表示算法 | 贪心算法实现--附C++/JAVA实现源码

以下是详细步骤。 创建大小为 V 的最小堆，其中 V 是给定图中的顶点数。最小堆的每个节点包含顶点编号和顶点的距离值。 以源顶点为根初始化最小堆（分配给源顶点的距离值为0）。分配给所有其他顶点的距离值为 INF（无限）。 当最小堆不为空时，执行以下操作： 从最小堆中提取…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023