javaScript事件捕获和冒泡

JavaScript——事件捕获和事件冒泡 JavaScript中事件捕获和事件冒泡的来由以及具体讲解,阻止事件捕获和冒泡(事件传播)的方法。 阅读详情
        事件是先捕获,后冒泡。从最外层向内逐层捕获直到目标(target),再逐层向上冒泡直到<html>标签。所有事件处理程序都会忽略捕获阶段,而在事件冒泡阶段触发事件。使用addEventListener绑定事件并且第三个参数为true,可以让事件在捕获阶段触发,这是唯一让事件在捕获阶段触发的方法。element.addEventListener("click",function(){},true)

事件中的this和event.target:
event.target:它始终指向最基本的元素,如:如果是单击事件则event.target指向鼠标点击的的元素。
this:this指的是当前事件触发的元素,从中可获取到元素的信息

阻止事件冒泡:

element.onclick = function(event) {
    event = event || window.event; // cross-browser event
    if (event.stopPropagation) {
        // W3C standard variant
        event.stopPropagation();
    } else {
        // IE variant
        event.cancelBubble = true;
    }
	//event.stopPropagation?event.stopPropagation():(event.cancelBubble = true);
}

一个事件有多个处理程序的情况:
事件处理程序会独立执行,互不干扰。比如有两个单击事件在同一个链接上,阻止一个事件的冒泡行为不会影响另一个事件的冒泡行为。并且浏览器不会保证事件触发的顺序。

实际编码中事件捕获使用非常少。也有一些函数不会冒泡,由捕获触发的,如:onfocus/onblur.
【JavaScript 中的事件冒泡和事件捕获有什么区别?】 事件冒泡和事件捕获是 JavaScript 事件模型中的两个重要概念,理解它们的区别和工作原理对于正确处理 DOM 事件至关重要。本文将深入探讨事件冒泡和事件捕获的概念、区别以及在实际开发中的应用。JavaScript、事件冒泡、事件捕获、事件传播、事件委托、DOM 事件、addEventListener、事件处理、事件流、前端开发、前端面试、前端基础、前端进阶、前端工程化、前端开发最佳实践WindowDocumentHTMLBodyTarget Element 二、事件冒泡 2.1 事件冒泡的定义 输出: 阅读详情

相关推荐

JS中事件处理机制(秒懂事件委托、事件捕获和事件冒泡)

综上所述,事件委托利用了事件冒泡的特性来简化事件处理程序的管理和提高性能,而事件捕获相对不常用。在事件捕获阶段,会从根节点开始,逐级向下直到目标元素,所以我们在事件捕获阶段输出了点击的目标元素的文本内容。在事件冒泡阶段,事件会从目标元素开始,逐级向上直到根节点,所以我们在事件冒泡阶段输出了点击的目标元素的文本内容。:在特定情况下,事件委托可以用作事件代理,即将一个对象上的事件委托到另一个对象上,使得第一个对象可以监听和响应第二个对象上的事件。这可以通过事件委托在模态框的父元素上捕获点击事件来实现。

百赢出品,必属精品 1729

事件冒泡详解及阻止事件冒泡

事件冒泡 js 阻止事件冒泡

我只是个很菜的前端 3015

前端开发:JS的事件冒泡和事件捕获详解

在前端开发过程中,关于JS原生的核心内容使用是日常工作中的常态,关于底层和原理的掌握使用,尤其是在性能优化方面甚为重要。作为前端开发的进阶内容,在实际开发过程中事件发生的顺序称为事件流,当触发某个事件的时候会引起一系列的连锁反应,但是当业务场景中页面功能嵌套了某几个元素来处理同一个事件,那么哪个事件会先被触发?这就需要了解事件传播当顺序。

全沾软贱开发攻城狮 1万+

onblur事件不支持冒泡的解决办法

onblur事件在元素是去焦点的时候被触发,常用与文字输入框,判断鼠标是否已经离开输入框,但是onblur并不支持事件冒泡,所以无法判断是否有子元素发生onblur事件。解决方法有两种: 1.用onfocusout事件代替,onfocusout事件的和onblur的作用是一样的,只不过onfocusout支持事件冒泡,但是需要注意的是,onfocusout在chrome,safari 和opera...

RebootTang的博客 2771

UDP协议详解——使用Socket通信

UDP(UserDatagramProtocol)是一个简单的面向消息的传输层协议,尽管UDP提供标头和有效负载的完整性验证(通过校验和),但它不保证向上层协议提供消息传递,并且UDP层在发送后不会保留UDP 消息的状态。因此,UDP有时被称为不可靠的数据报协议。如果需要传输可靠性,则必须在用户应用程序中实现。UDP使用具有最小协议机制的简单无连接通信模型。UDP提供数据完整性的校验和,以及用于在数据报的源和目标寻址不同函数的端口号。它没有握手对话,因此将用户的程序暴露在底层网络的任何不可靠的方面。

qq_3517289697的博客 3387

CSP-J/S复赛文件组织与freopen读写全攻略,避免爆零

在信息学竞赛的上机考试中,代码能力固然重要,但文件组织与输入输出重定向往往是决定成败的关键细节。许多选手习惯在线评测环境,对本地文件命名、目录层级和读写方式缺乏系统认知,导致算法正确却因文件名拼写错误或freopen使用不当而遗憾失分。理解评测系统的工作原理,掌握从建立准考证号目录到规范命名源文件,再到使用freopen进行文件流重定向的标准流程,是每位参赛者的必备技能。这种工程化习惯不仅适用于CSP-J/S复赛,也是未来参加NOI等更高水平竞赛的基础。本文从文件组织的底层逻辑出发,结合实战案例,系统讲解考

weixin_32466193的博客 595

【JavaScript】事件捕获详解

在浏览器中,当用户与网页元素交互(如点击、输入或滑动)时,事件会从浏览器的顶层元素(即window)向下传递到目标元素,这一过程称为事件流。捕获阶段:从window开始向下到目标元素。目标阶段:事件到达目标元素。冒泡阶段:事件从目标元素向上传递,直到window。事件捕获(Event Capturing)指的是事件在捕获阶段被处理的过程。在这一阶段,事件从最顶层元素逐级传递到目标元素,开发者可以选择在捕获阶段处理事件,而非等待事件到达目标元素或在冒泡阶段处理。

lph159的博客 1902

VSCode上搭建C/C++开发环境(vscode配置c/c++环境)Windows系统---保姆级教程

关于VSCode上搭建C/C++开发环境的内容,到这里就结束了,这里博主感叹一下,VSCode真的挺强大的,作为一个编辑器,可以通过和编译器链接成为开发环境,将环境配置好的话,在这上面写代码似乎也是个不错的选择。大家有任何疑问,欢迎在评论区中提出,本篇博客有任何问题和错误也欢迎来和博主讨论,真心希望能和大家一起进步。最后,如果本篇博客对你有帮助的话,能不能给博主一个三连啊!

2303_79329831的博客 8万+

JavaScript 事件冒泡与捕获机制 --- 带动态图理解

JS的冒泡与捕获机制的理解 ,事件委托方法的实现

好的文章我尽力写,大家的学习我尽力帮 1353

LabVIew串口收发的一些问题

LabView串口收发实验总结

weixin_45508826的博客 2065

Xilinx FPGA 100G RDMA开发实战:基于AXI Lite配置的ROCE V2高速通信系统搭建

本文详细介绍了在Xilinx FPGA上搭建100G ROCE V2高速通信系统的实战过程。通过分析RDMA技术优势与FPGA实现的必要性,重点阐述了基于AXI Lite接口配置ERNIC IP核的关键步骤,包括硬件系统构建、驱动开发及与商用网卡的互通测试,旨在实现兼具高性能与灵活性的网络加速方案。

js777的博客 579

【JavaScript】十六、事件捕获和事件冒泡

此时,点击红色的儿子元素部分,因为红色部分也属于绿色的父亲div,更属于整个document,所以三个点击事件都触发,但因为现在addEventListener是true,所以,是事件捕获,从document到父div再到子div,因此,效果是:弹窗依次从父元素到子元素。对比给div绑定一个点击事件,当事件被触发时:会经历两个阶段,分别是捕获阶段、冒泡阶段,事件流则指的是事件完整执行过程中的这个流动路径。事件冒泡🫧:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。

llg___的博客 1748

从零拆解快手Web端__NS_hxfalcon:JS逆向签名参数定位与复现

在JS逆向与前端反爬攻防中,签名参数总是绕不开的核心环节。无论是接口加密还是请求签名,其本质都是通过在客户端收集环境信息、时间戳与业务参数,经特定算法计算后生成用于服务端校验的动态令牌。理解这类参数的生成原理,不仅能提升逆向分析效率,也能帮助前端开发者更好地设计自身接口防护方案。在实际工程中,面对经Webpack打包且高度混淆的代码,直接全局搜索参数名往往难以奏效,需要结合请求抓包、调用栈跟踪、环境适配等方法逐步定位。此类签名参数广泛存在于现代Web应用的GraphQL或REST接口中,是接口数据安全的重要

weixin_29474431的博客 337

js 事件冒泡和事件捕获

一块: 事件流描述的是从页面接收事件的顺序。  IE的事件是冒泡事件流,  而firefox的事件流是捕获事件流。  1.事件冒泡  IE的事件流叫做事件冒泡,即事件从最具体的元素到不具体的元素。  好比气泡从水底下一直向上冒泡,像dom树一样,一直到根元素。  2.事件捕获  即从不具体的元素到具体的元素 事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 &l...

前端技术的学习整理 2万+

ConvNeXt 改进 :ConvNeXt添加GnConv递归门控卷积,二次创新CNBlock结构 ,独家首发

视觉 Transformer 在多种任务中取得了显著的成功,这得益于基于点积自注意力的新空间建模机制。视觉 Transformer 中的关键因素——即输入自适应、长距离和高阶空间交互——也可以通过卷积框架高效实现。作者提出了递归门控卷积(Recursive Gated Convolution,简称 gnConv),通过门控卷积和递归设计执行高阶空间交互。该新操作具有高度的灵活性和可定制性,兼容各种卷积变体,并将自注意力中的二阶交互扩展到任意阶数,而不会引入显著的额外计算。

在职AI算法工程师,擅长计算机视觉,YOLO目标检测、分割等,擅长web、pyqt界面可视化,好内容持续更新中,来这里跟大家一起学习,共同进步 240

【软考】数据库系统工程师备考指南(一)

目录一、数据库系统工程师简介二、考试要求三、考试目标四、考试范围(一)信息系统知识(二)数据库系统设计与管理 一、数据库系统工程师简介 数据库系统工程师考试属于全国计算机技术与软件专业技术资格(水平)考试(简称计算机软件水平资格考试)中的一个中级考试。考试不设学历与资历条件,也不论年龄和专业,考生可根据自己的技术水平选择合适的级别合适的资格,但一次考试只能报考一种资格。考试采用笔试形式,考试实行全国统一大纲、统一试题、统一时间、统一标准、统一证书的考试办法。笔试安排在一天之内。 2022 年数据库系统工程

邓邓子的博客 3861

17-理解JavaScript中的事件捕获和事件冒泡

笔记+分享在现代Web开发中,事件处理是一个至关重要的部分。JavaScript中的事件模型包括两个主要的阶段:事件捕获和事件冒泡。理解这两个概念有助于我们更好地控制事件的行为,进而编写更高效的代码。本文将详细介绍事件捕获和事件冒泡的概念、区别及其在实际开发中的应用。

weixin_46002095的博客 968

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

简析JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序

JavaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序 这篇文章主要介绍了javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结的相关资料 (一)事件绑定的几种方式 javascript给DOM绑定事件处理函数总的来说有2种方式:在html文档中绑定、在js代码中绑定。下面的方式1、方式2属于在html中绑定事件,方式3、方式4和方式5属于在js代码中绑定事件,其中方法...

fannnnnn的博客 3656

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

【JS】事件捕获和事件冒泡的区别

通过具体的示例演示了冒泡和捕获的区别,并且列出使用场景

qq_43720551的博客 2550

【 JS 】什么是JavaScript事件冒泡、事件捕获和事件委托

前言 在W3C事件模型中,一次事件的发生包含3个过程 1.捕获: 先由文档的根节点document(window )接收,然后逐级向下传播,直到具体的事件元素 2.目标: 事件源,触发事件 3.冒泡: 与捕获相反,逐级向上,直到文档根节点 (1)可以简单理解为事件发生的顺序不同, (2)绑定事件方法addEventListener(“事件名”,事件function,true),第三个参数默认为fa...

qq_40060547的博客 320

js中冒泡和捕获/阻止冒泡和捕获事件

JavaScript中捕获/阻止捕获、冒泡/阻止冒泡   事件流描述的是从页面中接收事件的顺序。提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流。 第一部分:事件冒泡   即事件开始由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)。   下面举一个简单的例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt

sk_yi的博客 5875

js事件冒泡和捕获

彻底弄懂js中事件冒泡和捕获是怎么回事 一、DOM事件触发经历的三个阶段 1、首先我们要弄清楚当一个dom事件被触发时,它不仅仅只是单纯地在自身对象上触发一次,而是经历了三个不同的阶段:???? 捕获阶段:先由文档的根节点document往事件触发对象,从外向内捕获事件对象; 目标阶段:到达目标事件位置,触发事件; 冒泡阶段:再从目标事件位置往文档的根节点方向回溯,从内向外冒泡事件对象。 2、下面贴上一...

zxyong的博客 621

Javascript的事件捕获和事件冒泡

我们在外层div和内层div的onclick事件上都绑定了方法,打开浏览器试试。当我们点击外层绿色部分,外层div的事件响应了;让我们点击内层蓝色部分,内层div的事件先响应,然后外层div的事件再响应。所以我们很容易得出结论,浏览器是先找到当前被点击的元素,如果该元素上注册了onclick事件则响应;然后浏览器继续寻找被点击元素的父元素,如果其也注册了onclick事件,则该事件也响应,然后再继续向上层寻找。这就是JS的事件冒泡机制。

2501_90424610的博客 1131

JavaScript中的事件冒泡和事件捕获机制

如果我们在inner元素上绑定一个点击事件,那么当inner元素被点击时,事件会从inner元素开始冒泡,依次传递到middle元素和outer元素,最终传递到整个文档的根节点。比如我们在一个嵌套的HTML结构中,点击最里层的子元素,事件会从子元素开始,依次向上层父元素传递,直到传递到整个文档的根节点。例如,我们可以在点击某个元素时,使用事件捕获机制来停止事件的传播,从而避免其他元素对事件的处理干扰。与事件冒泡不同的是,在事件捕获过程中,每个节点都有机会处理这个事件,直到事件传递到最内层的元素。

tyxjolin的专栏 2888

解释一下JavaScript的事件冒泡和事件捕获

当我们在开发前端应用程序时,经常会涉及到事件处理。JavaScript中的事件处理机制包括事件冒泡和事件捕获,这两种机制在处理用户交互时起着至关重要的作用。

有我更精彩的博客 1224

JS中的事件冒泡和事件捕获

当有很多盒子嵌套并且多层盒子都存在事件的时候,我们就必须要思考一个问题——这些事件的发生顺序。JS中用事件冒泡和事件捕获来处理事件流中事件发生顺序,在用addEventListener方法添加事件监听的时候,第三个参数用来控制是冒泡事件还是捕获事件(false为冒泡,true为捕获,默认值为false)。 事件冒泡 事件冒泡顾名思义,事件发生的顺序就像一个气泡从水底浮起那样,从底到顶,从内到外。 当只存在事件冒泡的时候,点击“李”的盒子,输出的答案如下图 可以看到从内到外依次输出了“li sun

z020729的博客 3987
上一篇: 工厂模式创建对象
下一篇: 浏览器默认行为
五月西瓜
博客等级 码龄12年 4粉丝 28原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值