js事件的捕获与冒泡

最新推荐文章于 2024-09-02 22:46:42 发布
最新推荐文章于 2024-09-02 22:46:42 发布
阅读量510 收藏
点赞数
分类专栏： JS 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41743601/article/details/121728517
版权

js事件的捕获与冒泡

1.捕获

事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
从顶层元素到目标元素或者从目标元素到顶层元素，和事件冒泡是一个相反的过程。事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

在这里插入图片描述
在这里插入图片描述

2.冒泡

事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

在这里插入图片描述

阻止事件冒泡
在这里插入图片描述

菜鸟猪猪侠yy
关注
专栏目录
Javascript事件的捕获与冒泡
qq_33390316的博客
11-14 277
首先根据定义，addEventListener() 方法用于向指定元素添加事件句柄。其中有3个参数，addEventListener(event,function,useCapture),分别为： event：字符串，指定事件名。（必须） function：指定要事件触发时执行的函数。（必须） useCapture:布尔值，指定事件是否在捕获或冒泡阶段执行。(可选） useCapture的可能值为： true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行。 也许我们平时会碰到这样一
JavaScript事件捕获与冒泡+案例分析
流楚丶格念的博客
08-21 3925
文章目录事件的三个阶段测试阻止事件冒泡的方式冒泡显示测试 事件的三个阶段 事件对象.eventPhase属性可以查看事件触发时所处的阶段 事件捕获阶段 : 从外向内 事件目标阶段 : 最开始选择的那个 事件冒泡阶段 : 从里向外 为元素绑定事件 addEventListener(“没有on的事件类型”,事件处理函数,控制事件阶段的) addEventListener中第三个参数是控制事件阶段的 事件的阶段有三个: 通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的 如果这个属
js中事件捕获和事件冒泡（事件流）
muzidigbig的博客
10-22 596
其实不仅在js中，在面向对象的编程语言中或多或少涉及到这个问题。js编程的事件全解，你可以到我的主页，这里给你重点讲一下js中的事件捕获和事件冒泡。 事件捕获和冒泡的定义 上图为网页事件的捕获和冒泡过程。 冒泡型事件：子元素事件会向父元素传递，触发父元素的同类事件。事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 捕获型事件：事件从最外层...
【JS】事件捕获和事件冒泡的区别
最新发布
qq_43720551的博客
09-02 1522
通过具体的示例演示了冒泡和捕获的区别，并且列出使用场景
【原创翻译】生动详细解释javascript的冒泡和捕获，包懂包会
weixin_30387423的博客
02-08 215
前言：虽然精通jquery，但对它的原型javascript却不是很了解，最近在学习javascript中遇到了一些困难，比如冒泡和捕获，很多次被提到，但又不知究竟应用在何处。找到了一些好文章解惑，在这里分享给大家。 quirksmode的一系列文章都不错，通俗易懂，这篇只是一系列中的某一篇，有机会把javascript这系列都翻译给大家。 原文地址在这里http://www.quirksmo...
彻底弄懂JS的事件冒泡和事件捕获
jeanFlower的博客
01-17 1024
在学校，听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样，只依稀记得IE使用的是事件冒泡，其他浏览器则是事件捕获。当时的我，把它当成IE浏览器兼容问题，所以没有深究（IE8以下版本的浏览器已基本退出市场）。工作至今，虽然多次遇到该类问题，但均未深究，始终一知半解，遇到了全TM靠猜（选A不行就选B呗）。今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了。 先上结论：他们是描述事件触发
js事件冒泡和事件捕获
qq_45149366的博客
08-03 5391
事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 <div id="outer"> <p id="inner">Click me!</p> </div> 上面的代码中一个div元素中有一个p子元素，如果两个元素都有一个click的处理函数，那么我们怎么才能知道哪一个函数首先被触发呢？ 为了解决这个问题，微软和网景提出了两种完全相反的概念。 1.事件冒泡 微软提出了名为事件冒泡的事件流。这个事件流是
js基础之事件捕获与冒泡原理
12-13
想要了解什么是事件捕获与冒泡，需要先了解什么是事件。 什么是事件？ 我们知道，在前端开发中，JavaScript负责定义网页的“行为”。这里所说的“定义”，其实指的是开发者可以通过JavaScript语言向浏览器描述一些...
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
JS之事件捕获和事件冒泡
小太阳的博客
01-14 5114
DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件捕获（event capturing）： 当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。 事件冒泡（dubbed bubbling）： 事件源 =>根节点（由内到外）进行事件传播。 无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播。 dom标准事件流的触发的先后顺序为：先捕获再冒泡。即当触发do.
JS中的事件冒泡和事件捕获
z020729的博客
04-12 3788
当有很多盒子嵌套并且多层盒子都存在事件的时候，我们就必须要思考一个问题——这些事件的发生顺序。JS中用事件冒泡和事件捕获来处理事件流中事件发生顺序，在用addEventListener方法添加事件监听的时候，第三个参数用来控制是冒泡事件还是捕获事件（false为冒泡，true为捕获，默认值为false）。 事件冒泡 事件冒泡顾名思义，事件发生的顺序就像一个气泡从水底浮起那样，从底到顶，从内到外。 当只存在事件冒泡的时候，点击“李”的盒子，输出的答案如下图 可以看到从内到外依次输出了“li sun
js 的冒泡和捕获事件
qq_42816270的博客
01-30 1518
事件冒泡：事件从内部元素向外部元素传播。事件捕获，事件从外部元素向内部元素传播。addEventListener 的第三个参数，定义事件是在冒泡阶段执行，还是在捕获阶段执行。
JavaScript中的事件冒泡和事件捕获机制
tyxjolin的专栏
05-06 2618
如果我们在inner元素上绑定一个点击事件，那么当inner元素被点击时，事件会从inner元素开始冒泡，依次传递到middle元素和outer元素，最终传递到整个文档的根节点。比如我们在一个嵌套的HTML结构中，点击最里层的子元素，事件会从子元素开始，依次向上层父元素传递，直到传递到整个文档的根节点。例如，我们可以在点击某个元素时，使用事件捕获机制来停止事件的传播，从而避免其他元素对事件的处理干扰。与事件冒泡不同的是，在事件捕获过程中，每个节点都有机会处理这个事件，直到事件传递到最内层的元素。
浅谈JS事件冒泡
aiwu9318的博客
06-16 727
今天要跟大家谈的是事件冒泡，这个事件呢，也是两面性的，有时候给我们带来bug,有时候优点也很明显。我们就一起来看看它的真面目。 首先看看事件冒泡是什么？ 事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 ...
js事件冒泡和事件捕获详解
顺其自然~专栏
06-02 1836
Javascript与HTML之间的交互是通过事件实现。 一、事件流 事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接受事件的顺序。IE9，chrome，Firefox，Opera，Safari均实现了DOM2级规范中定义的标准DOM事件，而IE8和IE8以下版本仍然保留专有的事件处理方式。 事件冒泡 事件冒泡是由IE开发团队提出来的，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播。就像冒泡一样。 <!DOCTYPE html&
js 事件模型 事件捕获、事件冒泡
weixin_54714100的博客
04-17 1317
什么是事件捕获、事件冒泡 事件冒泡（event bubbling）和事件捕获（event capturing）是指在 DOM 树中处理事件的两种不同方式。
JS的冒泡事件和捕获事件
Wu ShanShan的博客
05-18 1152
冒泡事件 1. 定义： &amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;&amp;amp;nbsp;当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡。 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;这个事件从原始
JavaScript事件捕获与冒泡详解：理解行为定义与执行机制
掌握事件捕获与冒泡原理有助于优化用户体验，避免因事件处理冲突导致的意外行为，同时也为复杂事件管理提供了强大的工具。在实际开发中，根据需求灵活运用这两种模式，可以编写出更高效、可维护的JavaScript代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值