JS中对事件流的理解

最新推荐文章于 2024-07-30 17:09:59 发布
最新推荐文章于 2024-07-30 17:09:59 发布
阅读量83 收藏
点赞数
分类专栏： 基础巩固 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46051260/article/details/126052653
版权

事件流 捕获阶段 冒泡阶段 addEventListener 事件处理
关键词由CSDN通过智能技术生成

事件流：从页面接受事件的顺序
事件流分为三个阶段：捕获阶段、当前目标阶段、冒泡阶段
在这里插入图片描述
addEventListener（事件，回调函数，布尔值（false冒泡，true捕获）默认false）
事件捕获：不太具体的节点先接受到事件，而最具体的节点最后接受事件
事件冒泡：最具体的节点先接收事件，不太具体的节点最后接受到事件

weixin_46051260
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS的事件循环理解
蔡姐的博客
04-20 2090
早年曾写了一篇事件循环的学习笔记,Jake Archibald: In The Loop【事件循环学习笔记】,不过这个以视屏学习为主流程,今天再写一篇,对事件循环做个补充. 一. 为什么需要事件循环 因为js是一门单线程语言,但是我们因为需要调用接口或者进行其他需要延时的操作,如果是单线程,就会阻塞整个进程.所以实现单线程非阻塞的方法就是事件循环. 在JS中任务大致分为两种: 同步任务:可以立即执行,同步任务一般会直接进入到主线程中执行. 注意: new Promise 是同步任务,可以进入主线程 异步任
JS中事件的传播
Fantasc的博客
08-10 759
事件的传播： 介绍：最初，微软和网景两个公司有不同的见解，前者认为事件的触发由内而外，先触发当前元素的事件，再向当前事件的祖先元素上传播，事件应该在冒泡阶段被触发。后者认为事件的触发是由外向内的，当事件被触发时，应该先触发当前元素的事件，随后再向当前元素的后代元素传播。 W3C的决定：其综合了两家公司的不同理解，将事件的传播分为三个阶段： 捕获阶段：从最外层的祖先元素开始，(W3C规定的最外层祖先元素为document，一般浏览器将最外层的祖先元素设置为window)，想目标元素进行事件的捕获，在此捕
js事件流
weixin_43368552的博客
08-29 1435
当一个元素的事件被触发的时候，同样的事件将会在该元素的祖先元素中依次被触发。简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的。例如：都是'click',儿子触发，相同的事件的祖宗才会触发。方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。因为默认就有冒泡行为的存在，所以容易导致事件影响到父级元素。若想把事件就限制在当前的元素内，就需要阻止事件流动。若是用L0事件监听，则只有冒泡阶段，没有捕获。事件流指的是事件完整执行过程中的流动路径。事件流分为捕获阶段和冒泡阶段。...
彻底理解js的事件流
07-17 420
我们都知道js和html之间进行交互都是通过事件来执行的，那么就有必须知道事件的执行顺序了！ 1.事件流概念 描述的是从页面中接收事件的顺序，可以理解为当事件发生时，执行事件的顺序。这个顺序就像按照一个流执行的。这个流是怎么流的呢？不同的事件模型事件流（不懂的可以点击这里js中事件绑定）也不一样！下面我简单的说下区别！！ 1.事件模型(事件绑定方式)(https://blog.csdn.net/ws9029/article/details/107402484) Dom 0级模型 IE模型 Dom 2级模型
JavaScript事件流详解
weixin_60297362的博客
03-06 1429
文章目录DOM事件流事件冒泡事件捕获情景一：直接在HTML中绑定事件情景二：[domNode].onclick()方式 —— DOM0级情景三：[domNode].addEventListener()方式 —— DOM2级 DOM事件流 要明白事件流，首先我们要明白三点： 元素不是独立的，是串联在一起的 单个元素触发事件以后还会影响其他元素 事件流的方式：事件捕获(网景提出)、事件冒泡(IE提出) 我们就以上图为例，假设你给div绑定了点击事件，当你点击了div后，其他元素也会受之牵连，会引起牵一发
JS事件流
Head_Bird的博客
09-26 231
JavaScript的事件流的概念 事件的概念： HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。想要知道这些事件是在什么时候进行调用的，就需要了解一下“事件流”的概念。 什么是事件流： 1，DOM事件流， "DOM2事件流"规定的事件流包括三个阶段： 1，事件捕获阶段。 2，处于...
深入理解JS的事件绑定、事件流模型
10-18
JavaScript中的事件绑定和事件流模型是前端开发中的重要概念，它们是实现用户交互和页面动态性的基础。在本文中，我们将深入探讨这两个主题。 一、JS事件 1. **事件分类**： - 鼠标事件：如`click`, `dbclick`, `...
Javascript 事件流和事件绑定
10-29
JavaScript 事件流和事件绑定是Web开发中关键的交互机制，它们允许用户与网页进行交互。事件流描述了事件在DOM（文档对象模型）中如何传播，而事件绑定则是将特定的行为与这些事件关联起来。 事件流主要有三种类型...
详解JavaScript 事件流
10-14
JavaScript 事件流是理解JavaScript中事件处理机制的关键。事件流描述了用户在网页上进行交互时，事件（如点击、滚动等）如何在HTML元素层级之间传递。这个过程分为三个阶段：事件捕获、处于目标阶段和事件冒泡。 1...
深入理解JS DOM事件机制
11-27
在实际开发中，我们可以通过监听事件和调用相关方法来实现对事件流的控制，比如使用`addEventListener`方法添加事件监听器时，可以选择性地设置第三个参数为true，以开启事件捕获模式，或者在事件处理函数内调用`...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 650
JavaScript青少年简明教程：函数及其相关知识（下）
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 419
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 79
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 1301
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 216
【代码】vue el-select的下拉树形结构。
互联网医院系统源码与医保购药APP开发的完整技术指南
最新发布
meihusdk的博客
07-30 176
开发过程中需注重数据安全、系统性能、用户体验等多个方面，确保系统的高效稳定运行和良好用户体验。希望这篇技术指南能为开发者提供有益的参考，助力互联网医疗健康行业的发展。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 265
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
新手vue学习问题汇总（自用）（长期更新）
lapiii的博客
07-28 358
是 ES6 模块语法，用于导出模块的默认成员。在 Vue.js 中，通常用来导出一个组件对象，使其可以在其他文件中被导入并使用。
JavaScript+jQuery：深入理解事件流与冒泡机制
理解并掌握事件流对JavaScript开发者来说至关重要，因为它影响着事件处理的效率和用户体验。浏览器的兼容性问题也是本章关注的重点，因为早期版本的浏览器在处理事件和事件流方面存在差异，开发者需要针对不同的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值