事件冒泡和捕获

最新推荐文章于 2024-10-18 17:51:23 发布
最新推荐文章于 2024-10-18 17:51:23 发布
阅读量44 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CHunQIu12/article/details/115977885
版权

事件冒泡

即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。

看以下例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
	<div></div>
</body>
</html>

如果点击了页面的div元素，那么这个click事件沿着DOM树向上传播，在每一级节点上都会发生，按照如下顺序传播：

  1. div
  2. body
  3. html
  4. document

事件捕获

事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该是最后接收到事件。事件捕获的用意在于在事件到达预定目标之前就捕获它。

还是以上一节的html结构为例：

在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，即div元素

  1. document
  2. html
  3. body
  4. div
CHunQIu12
关注
js阻止事件冒泡和捕获事件
m0_62173626的博客
07-12 3873
阻止事件冒泡
事件冒泡和事件捕获的区别
热门推荐
weixin_42463235的博客
12-24 1万+
事件冒泡和事件捕获这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。 1、事件冒泡 事件冒泡：事件会从最内层的元素开始发生，一直向上传播，直到document对象。 2、事件捕获 事件捕获：与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。 3、addEventListener方法 element.addEventListener(event, function, ...
事件冒泡和捕获的执行顺序
qq_43751465的博客
09-14 1422
<div id="div1">我是div1 <div id="div2">我是div2 <div id="div3">我是div3 <div id="div4">我是div4</div> </div> </div> </div> var div1=document.getElementById("div1"); var div2=document.getElementById("di
vue 阻止事件冒泡和捕获
m0_46129241的博客
04-27 6118
vue 阻止事件冒泡和捕获 @click.stop : 阻止事件冒泡 @click.prevent : 阻止事件默认行为 @click.self : 事件只作用在元素本身，而不是其子元素
JavaScript 中事件冒泡和捕获的区别
迹忆客
07-04 706
在 JavaScript 中，当我们需要首先处理最外层元素的事件时，我们使用事件捕获。事件捕获在事件冒泡之前进行，但很少使用，因为事件冒泡足以处理 JavaScript 中的事件流。在下面的代码中，我们使用了 JavaScript，在脚本中，我们使用了一个 .addEventListener 对象来执行冒泡事件。从上面的示例代码我们可以看出，在事件冒泡中，最内层元素的事件先被触发，最外层事件的元素才被触发。这两个事件的主要区别是事件冒泡先处理从最内层到最外层的事件，而事件捕获先处理最外层元素的事件。
事件冒泡和捕获区别及应用场景
csdn_zhuang的博客
07-23 2403
概念 冒泡 是从指定对象向上冒泡至不确定对象。例如：点击button时，是从button级div不断冒泡至window层。 捕获 是从最外层不确定对象，定位至精确对象过程。 过程图 举个栗子 html部分 <div id="parentId"> 父级 <div id="childId1">子级1</div> <div id="childId2">子级2</div> </div? js部分，注册事件 let parent=do
事件冒泡和事件捕获
kiku
08-18 796
事件冒泡和事件捕获 事件流是描述从页面中接收事件的顺序【从内到外(冒泡)，从外到内(捕获)】。 事件冒泡： 事件可以沿着包容层次一点点起泡到上层，也就是说，下层的DOM节点定义的事件处理函数，到了上层的节点如果还有和下层相同事件类型的事件处理函数，那么上层的事件处理函数也会执行。例如， div 标签包含了 a ，如果这两个标签都有onclick事件的处理函数，那么执行的情况就是先执行标签 a 的o...
vue事件（键盘事件，鼠标事件，输入事件）事件冒泡和捕获
cn33333的博客
10-20 8099
无论事件流中只有捕获还是事件流中只有冒泡，还是说是事件流中既有捕获还有冒泡，event.stopPropagation()都可以阻止事件流的传播顺序。只要是event.stopPropagation()加在哪里，则到哪里就停止运行，停止捕获或者停止冒泡，简单说是，仍然按照正常的混合机制流程走，只是哪里有e.stopPropagation()则这个流程到哪里就停止了。为true时，表示事件捕获阶段执行，从外往里。是不是很疑惑，自己明明点击的是box2，打印的数据却是“点击box1 点击box2”？
JS中的事件冒泡和事件捕获
杨欢博的博客
06-04 780
谈起JavaScript的 事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。 事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。 事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。 1、冒泡事件： 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。通俗来讲就是，就是当设定了多个div的嵌套时；即建立了父子关系，当父div与子div共同加入了onclick事件时，当触发了
JS中绑定事件顺序（事件冒泡与事件捕获区别）
10-20
JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则...
javascript 中事件冒泡和事件捕获机制的详解
01-19
javascript 中事件冒泡和事件捕获机制的详解 二者作用：描述事件触发时序问题 事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件—由外到内 事件冒泡：自下而上的去触发事件—由内到外 绑定事件...
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
10-19
事件触发时序问题中的两个重要概念是事件冒泡（event bubbling）和事件捕获（event capturing）。这两个术语描述了事件流（event flow）在DOM树中的传播顺序。 事件冒泡是指当一个元素上的事件被触发后，该事件会...
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 765
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
深入解析：React中的信号组件与细粒度更新
Fisher的专栏
10-15 782
介绍了前端大火的signal原理，引入AutoStore为React提供了信号组件，帮助实现细粒度更新
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
源码好优多
10-16 893
请联系我获取更详细的演示视频。
React入门 9：React Router
pingguocu3的博客
10-13 596
路由routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。以上是中文维基百科对路由的解释。通俗的来讲，把一个地方的信息传输到他想去的目的地的过程，就叫路由。
Js面向对象
sdgfafg_25的博客
10-16 1078
程序就是对现实世界的抽象,一个事物抽象到程序中后就变成了对象,在程序的世界中，一切皆对象面向对象的编程指，程序中的所有操作都是通过对象来完成做任何事情之前都需要先找到它的对象，然后通过对象来完成各种操作一个事物通常由两部分组成：数据和功能一个对象由两部分组成：属性和方法事物的数据到了对象中，体现为属性事物的功能到了对象中，体现为方法。
2024 Bootstrap 秘籍：基础详解、实战案例与优化技巧
最新发布
weimengen的博客
10-18 640
本文介绍了使用 Bootstrap 构建网站的技巧。涵盖了 Bootstrap 的基础知识，包括响应式设计原理、HTML 结构、CSS 类作用和 JavaScript 插件。详细阐述了安装与使用方法、布局规划、组件选择及自定义样式等方面，并为每个知识点提供了丰富案例。掌握这些技巧，开发者能构建出高质量、美观且响应式的网站。
vue3事件冒泡和捕获
09-15
在 Vue 3 中，事件冒泡和事件捕获与原生 JavaScript 中的事件模型类似。Vue 使用了一种基于组件层级的事件模型来处理事件。 在 Vue 3 中，事件默认使用的是冒泡（bubbling）阶段。当一个子组件触发了一个事件时，该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值