探索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…
阅读更多...
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（渲染控制 一）

HarmonyOS学习路之方舟开发框架—学习ArkTS语言（渲染控制 一）

渲染控制概述 ArkUI通过自定义组件 的build()函数和builder装饰器 中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了使用系统组件外&#xff0c;还可以使用渲染控制语句来辅助UI的构建&#xff0c;这些渲染控制语句包括控制组件是否显示的条件渲染语句&#x…
阅读更多...
day-64 代码随想录算法训练营（19）图论 part 03

day-64 代码随想录算法训练营（19）图论 part 03

827.最大人工岛 思路一&#xff1a;深度优先遍历 1.深度优先遍历&#xff0c;求出所有岛屿的面积&#xff0c;并且把每个岛屿记上不同标记2.使用 unordered_map 使用键值对&#xff0c;标记&#xff1a;面积&#xff0c;记录岛屿面积3.遍历所有海面&#xff0c;然后进行一次广…
阅读更多...
JavaScript 在前端开发中有什么应用？

JavaScript 在前端开发中有什么应用？

JavaScript&#xff08;简称JS&#xff09;是一种脚本语言&#xff0c;广泛应用于前端开发中。作为Web前端三大基石之一&#xff08;HTML、CSS、JS&#xff09;&#xff0c;它可以使网页具备交互性、动态性和实时性&#xff0c;提高用户体验。在本文中&#xff0c;我将详细论述…
阅读更多...
机器学习-Pytorch基础

机器学习-Pytorch基础

Numpy和Pytorch可以相互转换&#xff0c;前者CPU上&#xff0c;后者GPU上&#xff0c;都是对矩阵进行运算&#xff0c;Pytorch的基本单位是张量。torch 可以初始化全为0、全为1、符合正态分布的矩阵确定性初始化 torch.tensor()torch.arrange()torch.linspace()torch.logspace…
阅读更多...
解决Ubuntu18.04安装好搜狗输入法后无法打出中文的问题

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

首先下载安装 搜狗拼音输入法 &#xff0c;下载选择&#xff1a; x86_64 在ubuntu中设置 fcitx 最后发现安装好了&#xff0c;图标有了 &#xff0c;但是使用时不能输入中文&#xff0c;使用下面的命令解决&#xff1a; sudo apt install libqt5qml5 libqt5quick5 libqt5qu…
阅读更多...
前端菜鸟浅谈Web前端开发技术

前端菜鸟浅谈Web前端开发技术

Web前端开发技术按照过程遵循了由容易到困难&#xff0c;这就请求Web前端开发工作技术员方面要熟练学习基础的Web开发技术&#xff0c;关于网站性能的美化、SEO以及基础的关于服务器端方面的知识&#xff1b;另一方面还对开发人员有具体要求&#xff0c;比如能够熟练且灵敏的使…
阅读更多...
回顾(第六课)

回顾(第六课)

Linux特点 开源 更流畅更稳定更安全 华为的openEuler (服务器) ------------------------------------------------------------------------- 一 查询命令行操作 Linux 常用到的命令 查看当前所在位置 pwd 查看目录下或者本身的信息或者内容 ls l…
阅读更多...
学习笔记|串口通信的基础知识|同步/异步|常见的串口软件的参数|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;求这个背包至多能装多…
阅读更多...
在CentOS7系统中安装MySQL5.7

在CentOS7系统中安装MySQL5.7

第一步&#xff1a;下载MySQL包 > wget http://repo.mysql.com/mysql57-community-release-el7-10.noarch.rpm第二步&#xff1a;安装MySQL源 > rpm -Uvh mysql57-community-release-el7-10.noarch.rpm第三步&#xff1a;安装MySQL服务端 > yum install -y mysql-c…
阅读更多...
抄写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 定…
阅读更多...
[Unity]GPU Instance 如何将人形Animator动画保存到图片里

[Unity]GPU Instance 如何将人形Animator动画保存到图片里

参考&#xff1a; GitHub - tkonexhh/RenderHugeByGPUInstanceCreating shaders that support GPU instancing - Unity 手册Animator-Play - Unity 脚本 APIUnity-Animator深入系列---API详解-CSDN博客Unity 获取当前动画播放的帧_unity获取当前动画播放到第几帧-CSDN博客http…
阅读更多...
C语言练习百题之排序算法

C语言练习百题之排序算法

题目:C语言实现排序算法 冒泡排序 思路&#xff1a; 依次比较相邻的元素&#xff0c;如果顺序不对则交换&#xff0c;直到整个数组有序。 实现代码&#xff1a; #include <stdio.h>void bubbleSort(int arr[], int n) {for (int i 0; i < n - 1; i) {for (int j…
阅读更多...
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 …
阅读更多...
最新文章

Copyright @ 2022~2023