通过过程来学习冒泡和捕获事件

最新推荐文章于 2024-07-08 08:31:14 发布
最新推荐文章于 2024-07-08 08:31:14 发布
阅读量55 收藏
点赞数
分类专栏： JS基础 文章标签： 事件冒泡 JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40686529/article/details/100164985
版权

本来写了很多，但是又乱又不详细，看了阮一峰大神的博客，发现最简最精华也不过如此了吧！点击进入

中心概要：

冒泡和捕获只是元素执行顺序的问题

体会冒泡过程点击这里，进入链接后滑到最下方，找到Event Propagation Chain

冒泡过程：

因为html界面是一个DOM树，当点击树杈的时候，当前事件会一层一层地向上传递，如果这个过程中的其它节点也注册了同样的事件，那么这个节点的事件也会触发。

冒泡的过程

debug的另一种形式的表示

再声明一次：必须2,1都是注册了跟3一样的事件

在这里插入图片描述

具体应用

阮博客里有一个栗子，我也没找到其它好的

浅端
关注
专栏目录
理解Javascript——事件的捕获和冒泡
weixin_57959921的博客
03-06 473
理解Javascript——事件的捕获和冒泡
javascript事件冒泡、事件捕获、事件委托
qq_26389819的博客
10-22 684
浅谈事件冒泡、事件捕获和事件委托DOM事件流事件冒泡事件捕获事件委托补充阻止事件冒泡 DOM事件流 对于学习过javascript的人而言，DOM对象必然再熟悉不过，我们常谈的DOM(文档对象模型)的结构是一个由许多的元素节点构成的树形结构。当一个HTML元素产生了一个事件后，该事件会在当前元素节点与根节点之间的路径上传播，事件所经过的路径都会收到该事件，这个传播过程就是我们所谓的DOM事件流。...
事件冒泡与事件捕获
Princess_ya的博客
09-02 643
事件冒泡、事件捕获
什么是JavaScript中的事件冒泡（event bubbling）和事件捕获（event capturing）？
最新发布
官方推荐
07-08 1万+
什么是JavaScript中的事件冒泡（event bubbling）和事件捕获（event capturing）？
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
zhouzuoluo的博客
05-26 4333
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流，这两种事件流分别是捕获和冒泡。 和许多Web技 术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的 是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。 默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Fir...
JavaScript学习记录 | DOM事件流 事件冒泡-事件捕获-事件委托
Viator_mp3的博客
09-18 343
通过事件委托，我们可以将事件处理程序绑定到父级元素，而不是直接绑定到每个子元素，从而减少了事件处理程序的数量，提高了性能和代码的可维护性。事件委托：事件委托是利用事件冒泡原理实现的，就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素。DOM事件流的三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段。使用事件委托时，如果注册到目标元素上的其他事件处理程序使用了。当事件处于目标阶段时，事件调用顺序决定于绑定事件的书写顺序。目的：解决页面中的事件流（事件发生顺序）的问题。
JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）
2401_84435768的博客
07-04 511
当事件在 DOM 树中某个元素上触发时，事件首先会从根节点（document）开始，沿着DOM树向下传播直至达到目标元素。因此，如果在某个祖先元素上绑定了事件处理程序，并且该事件处理程序使用了事件捕获阶段，那么该事件处理程序会在目标元素的事件处理程序之前执行。因此，如果在某个祖先元素上绑定了事件处理程序，并且该事件处理程序使用了事件冒泡阶段，那么该事件处理程序会在目标元素的事件处理程序之后执行。因此，当我们将事件处理程序绑定到父元素上时，父元素可以代理处理子元素上的事件，这就是事件委托的原理。
事件流（捕获+冒泡+委托）
qq_50260510的博客
03-25 1012
关于 捕获+冒泡+委托 的内容
事件冒泡和事件捕获
2202_75675550的博客
11-19 53
事件冒泡和事件捕获都是为了解决在嵌套元素中处理事件的问题，它们可以根据实际需求选择使用。事件委托则是一种利用事件冒泡机制的技巧，可以简化代码并提高性能，在事件流中都有着重要作用。
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
10-21
理解这些基本概念后，可以有效地利用JavaScript事件机制实现交互式网页，例如阻止事件冒泡以防止不必要的事件处理，或者使用事件委托来减少内存消耗和提高性能。此外，掌握`addEventListener`的第三个参数（是否阻止...
深入理解DOM事件冒泡和捕获
介绍：什么是DOM事件冒泡和捕获 ## 1.1 简述DOM事件的基本概念和应用场景 在Web开发中，DOM（Document Object Model）事件用于响应用户操作或浏览器触发的事件。例如，点击按钮、悬停在链接上或者页面的滚动等都...
js里的null到底是什么？
qq1722377628的博客
10-15 3391
使用typeof null得到的null是object.所以，它是一个对象？？？ 先看一个小栗子. 前提：引用W3school Boolean() 函数 当要转换的值是至少有一个字符的字符串、非 0 数字或对象时，Boolean() 函数将返回 true。 提问： 既然typeof null返回的是object，而且Boolean()转换对象会得到true，然而Boolean(null)却...
一次按摸经历搞懂了js的this指向
qq1722377628的博客
10-22 1737
作为一个写代码的，经常坐在办公室，时间久了就容易脖子酸痛，我们都喜欢去按摸店找小红做一下服务，我就以按摸来写一篇js的this指向问题。 假如你常去的怡红院的高级技师叫小红，而你老婆的名字也叫小红，那我们找小红按摩的时候必须找对小红，毕竟这是性命攸关的事。所以this就是帮我们找对指向的办法。 1、普通函数的this。 例子1： 调用对象是window对象，window是js的全局对象。 var xiaoHong = "你tm敢让老娘帮你按摩？活腻了"; funct...
前端面试题——15.谈谈你对this对象的理解
qq1722377628的博客
10-15 963
this有个原则，就是谁调用就指向谁。 一、全局环境： 全局环境就是在里面，指向的是window对象。 （怎么可以不举几个栗子呢） 栗子1： var name = 'Jenny'; function person() { return this.name; } console.log(this.name); // Jenny co...
JS三元运算符语法错误记录
qq1722377628的博客
11-27 723
前言：本篇文章仅谈JS中的三元运算符，php,java等语法有不同。 今天写代码时三元运算符语法颠覆了我以往的认知！！！ 我们都知道if…else与"?:"都是判断使用的语句，个人习惯使用三元运算符，性能更优一点，而且代码更简洁舒服。详细可看说说三元运算和if…else的相同之处？ 如果你对三元运算符不太熟悉，推荐你看条件（三元）运算符 (? ：) 或者直接看我的例子： if…else式 let a; if (true) { a = 1; } else {
数组之map()、reduce()、apply()、forEach()，some()、every()基本用法
qq1722377628的博客
06-15 497
在学JS的数组过程中多次用到了这三个方法，确实简化了很多代码，但是用的也是云里雾里的，现在查询了一下文档，把它们三个基本用法记录下来。 map() MDN定义：map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 看不懂！看代码语法及结果 ↓ 语法1：array.map(执行规则) ① map()是数组的一个方法 ②括号里的规则自己定义，举个栗子 ↓ var...
前端面试题——14.谈谈强制转换和隐式转换
qq1722377628的博客
10-15 391
强制类型转换 常见强制转换主要是Number,Boolean,String这三个函数 1.Boolean()函数 只有这五种情况是false，其它情况都为true undefined null -0或+0 NaN ‘’（空字符串） 至于null是“对象”Boolean却返回false的，可以看这里 2.Number()函数 下面分成两种情况讨论，一种是参数是原始类型的值，另一种是参数是对象。 ...
async/await原理及使用方法
qq1722377628的博客
10-10 379
async/await是es7的功能，更好地解决了JS异步操作的问题。 1.Generator——async/await的爸爸 以前执行异步操作使用Generator函数，执行Gnerator函数会返回一个遍历器对象，但是只有调用next方法才会遍历下一个内部状态。例如下面一段Generator函数： function* Generator() { yield call('http://xxxx'); yield call('http://yyy'); return call('http://z
JavaScript事件冒泡与捕获深度解析
总结来说，JavaScript的事件冒泡和捕获是事件处理的基础，理解它们的工作原理有助于编写更加高效和灵活的事件处理代码。通过适当的事件监听和阻止传播，我们可以实现各种复杂的交互效果和优化性能。在学习和使用过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值