JavaScript 事件冒泡和事件捕获

事件冒泡指的是从触发元素开始,向父元素传播事件的过程。事件捕获则是相反,从父元素开始,向触发元素传播事件。

在 JavaScript 中,当一个事件发生时,会先进行事件捕获,然后再进行事件冒泡。在 DOM 中,所有元素都有一个 addEventListener 方法,可以用来添加事件监听器。这个方法有三个参数:事件类型、事件处理函数、和一个布尔值。如果布尔值是 true,则事件处理函数会在事件捕获阶段执行,如果是 false,则会在事件冒泡阶段执行。

事件冒泡和事件捕获在处理事件时,有着重要的区别。

事件冒泡中,当一个事件在子元素上触发时,会先在该子元素上执行事件处理函数,然后再向其父元素传播,直到文档的根元素。这意味着,如果在父元素上添加了事件监听器,那么在子元素上触发的事件也会在父元素上执行该监听器。

事件捕获中,当一个事件在子元素上触发时,会先从文档的根元素开始,向下传播到该子元素。这意味着,如果在父元素上添加了事件监听器,那么在子元素上触发的事件会先在父元素上执行该监听器。

一般来说,事件冒泡更常用,因为它更符合人类的直觉,也更容易理解和使用。

事件冒泡和事件捕获还有一个重要的区别就是可以在事件传播过程中被阻止。

在事件冒泡中,如果在子元素上触发的事件处理函数中调用了 event.stopPropagation() 方法,那么就可以阻止该事件继续向上传播。

在事件捕获中,如果在父元素上触发的事件处理函数中调用了 event.stopPropagation() 方法,那么就可以阻止该事件继续向下传播。

这两种方法都可以用来阻止事件的传播,但是在实际应用中要根据需求来选择使用哪一种。

另外还有一个叫做 event.preventDefault() 方法可以阻止事件的默认行为。如果需要阻止链接跳转,阻止表单提交等,就需要使用这个方法。

还有一些其他的细节需要注意:

  • 在事件冒泡中,如果在父元素上添加了事件监听器,那么在子元素上触发的事件会先在子元素上执行事件处理函数,然后再在父元素上执行事件处理函数。
  • 在事件捕获中,如果在父元素上添加了事件监听器,那么在子元素上触发的事件会先在父元素上执行事件处理函数,然后再在子元素上执行事件处理函数。
  • 事件传播过程中,如果在某个元素上调用了 event.stopPropagation() 方法,那么该事件就不会再继续传播。
  • 事件传播过程中,如果在某个元素上调用了 event.preventDefault() 方法,那么该事件的默认行为就不会执行。
  • 为了获徖更好的性能,应该尽量少地使用事件监听器。
  • 如果要在多个元素上使用相同的事件处理函数,可以使用事件委托,这样可以减少事件监听器的数量。

总结一下,事件冒泡和事件捕获是 JavaScript 中重要的事件处理机制,它们在事件传播过程中有着重要的作用。使用事件冒泡和事件捕获可以使用户更方便地处理事件,提高代码的可读性和可维护性。

当然,在实际开发中,我们可能会根据需求选择使用事件冒泡或事件捕获。在需要在父元素上捕获子元素的事件时,使用事件捕获;在需要在子元素上冒泡父元素的事件时,使用事件冒泡。

另外,在某些场景中,我们可能需要使用更高级的事件处理方式,例如双击事件、鼠标滚轮事件、键盘事件等。这些事件需要使用特定的事件类型和事件对象来进行处理。

对于这些高级事件,我们可以直接使用 DOM 元素的 addEventListener 方法来进行处理。例如,可以使用 "click" 事件类型来处理鼠标单击事件,使用 "mousewheel" 事件类型来处理鼠标滚轮事件。

需要注意的是,这些高级事件可能在不同浏览器之间有着不同的表现,所以在处理这些事件时需要对兼容性进行相应的处理。

事件冒泡和事件捕获是 JavaScript 中重要的事件处理机制,它们在事件传播过程中有着重要的作用。在开发过程中需要根据需求进行选择使用,并且注意兼容性的问题。

此外, 也可以使用 jQuery 类库来简化事件处理的流程,jQuery 提供了简单易用的 API 来进行事件的绑定和处理。它可以跨浏览器兼容性处理事件,使得事件处理变得更加简单。

例如, 使用 jQuery 的 .click() 方法可以绑定一个元素的单击事件,使用 .on() 方法可以绑定多个事件。可以使用 .off() 方法来取消事件绑定, 使用 .trigger() 方法来触发事件.

jQuery 也支持事件委托,可以通过在父元素上绑定事件,然后通过事件对象 event.target 属性来判断具体是哪个子元素触发了事件.

使用 jQuery 类库可以使事件处理变得更加简单易用,减少兼容性问题的处理。

作者:yuzhihui
出处:http://www.cnblogs.com/yuzhihui/ 声明:欢迎任何形式的转载,但请务必注明出处!!!
本文转载于网络 如有侵权请联系删除

相关文章

  • 独家 | 如何比较两个或多个分布形态(附链接)

    作者:MatteoCourthoud 翻译:陈超校对:赵茹萱本文约7700字,建议阅读15分钟本文从可视化绘图视角和统计检验的方法两种角度介绍了比较两个或多个数据分布形态的方法。复制从可视化到统计检验全方位分布形态比较指南:图片来自作者比较同一变量在不同组别之间的经验分布是数据科学当中的常见问题,尤其在因果推断中,我们经常在需要评估随机化质量时遇到上述问题。我们想评估某一政策的效果(或者用户体验功能,广告宣传,药物,……),因果推断当中的金标准就是随机对照试验,也叫作A/B测试。在实际情况下,我们会选择一个样本进行研究,随机分为对照组和实验组,并且比较两组之间结果差异。随机化能够确保两组间唯一的差异是是否接受治疗,平均而言,以便于我们可以将结果差异归因于治疗效应。问题是,尽管进行了随机化,两组也不会完全相同。有时,他们甚至不是“相似的”。例如,我们可能会在一组中有更多男性或年龄更大的人,等等(我们通常把这些叫做特质协变量或控制变量)。这种情况发生时,我们再也无法确定结果的差异仅仅是由治疗的效果导致,也不能将其完全归因于不平衡的协变量。因此,随机化之后非常重要的一步就是检查是否所有观测变

  • 我的 Serverless 实战—SSVM,用 Serverless搭建飞书机器人

    【本文正在参与“100%有奖|我的Serverless实战”征稿活动】,活动地址:https://marketing.csdn.net/p/15940c87f66c68188cfe5228cf4a0c3f步骤如下初始化配置创建企业自建应用地址为https://open.feishu.cn/ 点击进入管理 拿到id和Secret 启用机器人 注册ServerlessReactor账号地址为http://console.reactor.secondstate.info/account/register找到app 新建应用传入我们填写我们的id和Secret 此处的VerificationToken在事件订阅这里获取 welcomemassage这样写json格式{ "header":{ "title":{ "tag":"plain_text", "content":"欢迎使用「计算器」" } }, "elements":[ { "

  • JavaScript typeof, null, 和 undefined

    JavaScripttypeof, null,undefined,valueOf()。 typeof操作符你可以使用typeof操作符来检测变量的数据类型。typeof"John"//返回string typeof3.14//返回number typeoffalse//返回boolean typeof[1,2,3,4]//返回object typeof{name:'John',age:34}//返回object复制在JavaScript中,数组是一种特殊的对象类型。因此typeof[1,2,3,4]返回object。null在JavaScript中null表示"什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。用typeof检测null返回是object。你可以设置为null来清空对象:实例varperson=null;          //值为null(空),但类型为对象 复制你可以设置为undefined来清空对象:实例varperson=undefined;    //值为undefined,类型为

  • Windows 11正式发布,所有用户均可免费升级,还支持安卓应用

    Windows11正式发布了,新一代的Windows在图标、菜单栏、声音、性能上都有很多变化,而且还有了新的自定义电脑方法。上个月,微软CEO纳德拉在微软开发者大会上预告了“下一代Windows”即将来临,果然,就在上周,Windows11预览版镜像就被提前泄漏了。Windows系统从1985年开始至今,已经经历了30多年,陪伴了很多人的成长。那这次Windows11的更新,有什么不一样呢?01新LOGO和新壁纸Windows10的logo是有倾斜度的透视效果,但Windows11将这一设计取消,换成了方正的田字。左侧是Win10,右侧是Win11Window11自带的官方壁纸也挺好看的。而且还可以调整色调,在色彩设置中,可以选择系统的主题色。Window11的暗黑模式做得很漂亮,层级鲜明,色彩高级。02任务栏和图标和Win10做个对比,最明显的变化就是任务栏变到了完全居中的位置。任务栏图标的打开动效是这样↓开始菜单变成了这样↓这一改动,引起了网友们的吐槽,称其显得「果里果气」的。当然,也可以改为靠左放置。配合毛玻璃效果,看起来和Windows10差别不大了。默认设置下,任务栏里包含五

  • 客户旅程(Customer Journey)视角:更加高效的数字化转型主线

    客户旅程对于大家来说是一个既熟悉又陌生的名词,它的字面意思很好理解,但真正的客户旅程研究是一套非常系统与完整的方法,包括了客户与企业交互的多维信息与分析。但目前就算对于体验行业从业者而言,大家对于它的理解可能也还是处于比较初步的阶段。Part.One1.什么是客户旅程视角? 客户旅程视角简单说是围绕企业产品/服务而展开的客户视角,关注客户需求萌芽到交易完成以及享受产品/服务期间与企业互动的全过程。企业在实际经营中,为提供完整的体验和更好的用户转化,客户旅程的起点往往需要更早介入,需求的激发到萌发都需要关注。以客户旅程为轴线,能够从客户角度重新审视产品/服务设计甚至公司的内部架构流程等。比如5G业务,对于运营商而言,它们关心的是如何提升5G的渗透率之类的市场指标。但办理这项业务对于客户而言是将自己的通信状态从4G升级到5G的一个过程,将这个过程看作是一段客户旅程的话,它包括客户如何产生升级的想法、如何得知5G/升级5G相关的产品信息、如何办理升级5G套餐业务、如何才能使用5G服务,需不需要换手机等等问题,这个过程是非常漫长与复杂的(如图1所示)。当我们通过旅程视角来重新思考一项简单的业务

  • Newbe.Mahua 插件热更新

    本教程阐述如何在使用Newbe.Mahua开发插件时使用”插件热更新”技术。软硬条件名值IDEVS2017.5Newbe.Mahua1.11项目基础在阅读本教程之前,想必开发者已经学会了如何插件插件项目。因此本节只将本示例使用的关键参数和代码贴出。本插件项目名称使用Newbe.Mahua.Samples.HotUpdate,使用Newbe.Mahua.Plugins.Template模板。PluginInfo.cs文件内容:namespaceNewbe.Mahua.Samples.HotUpdate { ///<summary> ///本插件的基本信息 ///</summary> publicclassPluginInfo:IPluginInfo { ///<summary> ///版本号,建议采用主版本.次版本.修订号的形式 ///</summary> publicstringVersion{get;set;}="1.0.0"; ///<summary> ///插件名称 ///</summary&

  • 一日一技:如何统计有多少人安装了 GNE?

    摄影:产品经理产品经理笑得比草莓还好看 GNE正式版上线已经一周了,我想知道有多少人使用pip安装了GNE,应该如何操作呢? 这个时候可以使用google-cloud-bigquery来实现。首先我们需要先创建一个服务账号密钥,访问:https://console.cloud.google.com/apis/credentials/serviceaccountkey。从服务帐号列表中,选择新的服务帐号。在服务帐号名称字段中,输入一个名称。从角色列表中,选择BigQuery,在右边弹出的多选列表中选中全部与BigQuery有关的内容。如下图所示。下面密钥类型选为JSON,点击“创建”,浏览器就会下载一个JSOn文件到你的电脑上。然后,使用pip安装一个名为google-cloud-bigquery的第三方库。然后编写代码:importdatetime fromgoogle.cloudimportbigquery defnotify(message): print(message) client=bigquery.Client() query_job=client.query(&q

  • 新思路!商汤开源利用无标注数据大幅提高精度的人脸识别算法

    人脸识别是最近几年计算机视觉领域取得长足进步的领域,这得益于不断进步的深度学习强大的模型拟合能力和有标注的大型数据集的建立,已经出现了用于人脸识别的有标注的百万量级的数据集。 但继续扩大规模数据集变得越来越困难,即使是人工手工标注,当数据集规模越来越大也不可避免会引入噪声,如何利用廉价的无标注的人脸图像数据成为一个亟需破解的难题。 来自商汤科技、中国香港中文大学、南洋理工大学的研究人员日前发表于ECCV2018的论文《Consensus-DrivenPropagationinMassiveUnlabeledDataforFaceRecognition》,展示了一种从未标注人脸图像生成样本标签对,并将其用于监督学习模型训练的方法,提供了一种低成本扩大数据集规模提高人脸识别精度的新思路。 值得一提的是,这篇论文解决的问题与现实中的人脸识别应用场景密切相关,其假设已经有了少量已经标注的数据,而未标注的人脸图像数据是来自于不受控的环境中采集的,且这些人与数据库中已经有标注的人没有重叠,希望将这些数据赋予标签加入到训练集中。 作者信息: 算法思想 算法的核心动机是从未标注数据中找到那些来自同一个

  • 如何去破解所有的window和offices(超级全面)

    破解所有的Windows和Officesby方阳 版权声明:本文为博主原创文章,转载请指明转载地址http://www.cnblogs.com/fydeblog/p/7107666.html  摘要:本篇博客是分享一个软件,可以所有目前的windows和offices!(亲测过)1.破解工具——KMSAuto链接:https://pan.baidu.com/s/1_vNn4m9QXdYCnU0VVbey8g2.使用方法2.1下载完上面工具后,解压打开,会出现两项2.2直接打开应用程序KMSAutoNET,会出现以下界面2.3System和About不用管,点击Main中的Activation,会出现以下两项2.4要激活系统点ActivateWindows,激活Office点ActivationOffice,这个软件就会自动检测你的系统和Office,并破解 (注:激活Office需要你打开过Office,随便打开一个就可以)激活的office2016激活的windows8.1激活的visio2016希望这篇博客能对大家有帮助!

  • Go语言struct类型详解

    structGo语言中,也和C或者其他语言一样,我们可以声明新的类型,作为其它类型的属性或字段的容器。例如,我们可以创建一个自定义类型person代表一个人的实体。这个实体拥有属性:姓名和年龄。这样的类型我们称之struct。如下代码所示: typepersonstruct{ namestring ageint } 复制看到了吗?声明一个struct如此简单,上面的类型包含有两个字段。1.一个string类型的字段name,用来保存用户名称这个属性 2.一个int类型的字段age,用来保存用户年龄这个属性如何使用struct呢?请看下面的代码: typepersonstruct{ namestring ageint }复制varPperson//P现在就是person类型的变量了P.name="Astaxie"//赋值"Astaxie"给P的name属性. P.age=25//赋值"25"给变量P的age属性 fmt.Printf("Theperson'snameis%s",P.name)//访问

  • oracle中list_oracle listagg 拼接字符串过长

    大家好,又见面了,我是你们的朋友全栈君。语法 有点难以看懂,个人理解listagg是listaggregate的缩写(错了勿喷),也就是列表总计,聚合的意思。 官方文档解释为:LISTAGGordersdatawithineachgroupspecifiedintheORDERBYclauseandthenconcatenatesthevaluesofthemeasurecolumn. 大概意思就是listagg函数先在每个组里用orderby子句排序之后,再拼接每个分组里特指的列值。 从上面的解释可以知道,listagg每个组进行操作并返回一个输出行。注意:这里的组在没有groupby子句的时候指的是整个结果集,partitionby子句指的是结果集中分区。 参数解释上图的参数有:ALL:ALL关键字是可选的。measure_expr:measure_expr是被操作的列,可以是任何表达式。被操作的列中的空值将被忽略。delimiter:分隔符,用来分割被操作列的列值,就是拼接每个列值后面跟一个分隔符,最后一个列值除外,分隔符也是可选的,默认值为NULL。listagg_overfl

  • Tomcat一闪而过的调试方法

    很少用tomcat来部署,都是用springboot微服务。只是以前学的时候搞demo试过而已。 软件测试的期末作业要求要测一个Javaweb的项目,给了一个包然后要求部署在tomcat中并启动。   然后启动,一闪而过,隐约看见报错但emmm看不到报错信息。   方法1:在startup.bat的最后加一句pause。 但这个只能停在cmd里面,就你通过cmd然后cd到tomcat的bin的startup那里然后运行嘛,就会另外弹出个tomcat窗口运行嘛,那个窗口仍然是一闪而过。 网上说这个方法能看到报错信息,但似乎只能看到相关路径配置的报错信息,如果你路径配置没有错的话,就会像下面这样的界面:   然后我的路径配置没有错,显然是tomcat内部哪里配置错了,这个方法无法看到报错的信息。   方法2 为了看到更详细的信息,再来改startup.bat——找到call"%EXECUTABLE%"start%CMD_LINE_ARGS%把里面的start替换为run。   这个的效果就是,不再另外开一个tomcat窗口来运行tomc

  • Spring Cloud的Hystrix处理流程

      这文章不错 https://blog.csdn.net/zhuyanlin09/article/details/90368406  

  • 我的python中级班学习之路(全程笔记第一模块) (第二章)(第4部分:16进制、编码转换、bytes类型与存储、py3代码流程与转换方法、py2与py3的区别与总结)

    第二章            数据类型  字符编码  文件操作 第四部分  第十节:16进制运算   一、定义与语法 图例: **16进制转换**代码验证 例: 1.八进制 >>>oct(1) '0o1'#'0o1'0o是八进制的显示方式,后面的数字是多少位,就代表多少位 >>>oct(8) '0o10' >>>oct(16)#逢8进位 '0o20' >>>oct(32) '0o40'#8的多少倍就代表多少位 >>>oct(64) '0o100'#用的很少知道就行 2.十六进制 >>>hex(1) '0x1' >>>hex(15)#十六进制中f代表15,因为在16进制中,不能出现10或者10以上的2位数字 '0xf' >>>hex(16)#十六进制是逢16进位0

  • 什么是Hystrix,Hystrix如何使用

    什么是Hystrix,Hystrix如何使用     容错框架Hystrix,SpringCloud将Hystrix整合到Netflix项目中了。它主要用来添加一个延迟的阀值和容错逻辑。来帮助我们控制分布式系统之间的组件交互。 那么什么是延迟阀值呢:就拿下图中的销售模块举例,在销售模块调用会员模块的时候,会给销售模块加上一个延迟,比如说销售模块在限定的时间内没有接收到会员模块的响应或者有问题,就会触发容错的逻辑。   下面简单的介绍下,什么是Hystrix容错框架 1.Hystrix能使你的系统在出现依赖服务失效的时候,通过隔离系统所依赖的服务,防止服务级联失败,同时提供失败回退机制,更优雅地应对失效,并使你的系统能更快地从异常中恢复。 2.Hystrix能做什么? 2.1 防止单个依赖耗尽容器(例如Tomcat)内所有用户线程 2.2 降低系统负载,对无法及时处理的请求快速失败(failfast)而不是排队 2.3 提供失败回退,以在必要时让失效对用户透明化 2.4 使用隔离机制(例如『舱壁』/『泳道』模式,熔断器模式等)降

  • dataTable.Select,本地检索datatable中的数据

    通过dataTable.Select,本地检索表中的数据行,执行效率高是一方面,可以设计非常灵活的程序。 DataTablemTable=BO_Location.GetDataList_Up(); DataRowmRow; mRow=mTable.Select(string.Format("location_id='{0}'",BO_Location.Location_Id))[0]; BO_Location.Up_Type=mRow["up_type"].ToString();复制 尤其在将多行结构的数据,当成单行使用时,更是方便!  

  • 离线流量分析

    介绍 通过本地已经生成的pcap/cap文件,读取并分析数据 正文 PCAP_Parser.py 从login_invalid.pcap查找关键词invalid,如果有符合的数据包,把所有数据包详细打印出来。 importlogging logging.getLogger("scapy.runtime").setLevel(logging.ERROR)#清除报错 fromscapy.allimport* importre defpcap_parser(filename,keyword): pkts=rdpcap(filename) return_pkts_list=[]#返回匹配数据包的清单! forpktinpkts.res: try:#为什么用try呢,decode有可能失败 pkt_load=pkt.getlayer('Raw').fileds['load'].decode().strip()#提取负载内容 re_keyword='.*'+keyword+'.*'#形成关于关键字的正则表达式 #如果负载内容匹配,并且源端口为23,把数据包添加到ret

  • Java 遍历Map的4种方式

    packagecn.jdbc.test; importjava.util.HashMap; importjava.util.Iterator; importjava.util.Map; importjava.util.Map.Entry; /** *Map集合的循环遍历 *@data2020.11.12 * */ publicclassTestMap{ publicstaticvoidmain(String[]args){ Map<String,Object>map=newHashMap<String,Object>(); map.put("aaa",111); map.put("bbb",222); map.put("ccc",333);//第一种:通过keySet的方式 System.out.println("第1种:通过Map.keySet()遍历key和value:"); for(Stringkey:map.keySet()){//keySet获取map集合key的集合然后在遍历key获取value即可 Stringvalue=map.get(key

  • winform 批量控件取值赋值

    以前写winform最多写几个文本框,最近需要入录一个人员信息,那好几十个字段,一下子干蒙了,这要是一个个取值赋值都写到明天了,于是就自己写了个方法,也不是什么高大上的,就是很简单很普通很low的方法。 废话少说上代码,注意,这块我就用了个文本框,你也可以找到所有控件,尽量控件name与实体字段一样。 publicDictionary<string,object>GetRS_InfoVue() { vardic=newDictionary<string,object>(); foreach(ControlctlingroupBox1.Controls) { if(ctlisTextBox) { dic.Add(((TextBox)ctl).Name,((TextBox)ctl).Text); } } returndic; }复制 ViewCode 根据控件,实体赋值 ///<summary> ///属性赋值 ///</summary> ///<typeparamname="T"></typeparam>

  • MySql索引本质和InnoDB

    title:索引本质和InnoDB date:2021-04-1721:29:32 tags:MySql categories:MySql 复制 数据库索引和InnoDB 索引是帮助sql高效获取数据的数据结构

  • JavaWeb的Maven

    JavaWeb的Maven 使用Maven原因: 1、Javaweb开发中,需要使用大量的jar包,要手动导入 2、Maven就解决了上述手动导入和配置大量jar包的麻烦 Maven是项目架构管理工具,方便我们导入jar包。 Maven的核心:约定大于配置,有约束不能违反。Maven会规定我们如何编写Java代码,我们需要按这个规范来。 1、Maven安装 https://maven.apache.org/download.cgi 下载后,解压到了E:\Maven\apache-maven-3.6.3(注意,我之前放在了C盘,出了问题): 配置环境(仅在系统变量中创建): 1、M2_HOME中E:\Maven\apache-maven-3.6.3\bin: 2、MAVEN_HOME中E:\Maven\apache-maven-3.6.3:  3、Path中%MAVEN_HOME%\bin:  在命令行窗口输入mvn-version,出现如下截图,则成功: 2、配置阿里云镜像 镜像:mirrors 作用:加速下载 <mirror>    &l

相关推荐

推荐阅读