位置: 编程技术 - 正文

Javascript 事件冒泡机制详细介绍

编辑:rootadmin

推荐整理分享Javascript 事件冒泡机制详细介绍,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

1. 事件

在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作。

浏览器的事件表示的是某些事情发生的信号。事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3school教程 进行了解,这将有助于更好地理解以下的内容 。

2.冒泡机制

什么是冒泡呢?

下面这个图片大家应该心领神会吧,气泡从水底开始往上升,由深到浅,升到最上面。在上升的过程中,气泡会经过不同深度层次的水。

相对应地:这个气泡就相当于我们这里的事件,而水则相当于我们的整个dom树;事件从dom 树的底层 层层往上传递,直至传递到dom的根节点。

简单案例分析

下面通过一个简单的例案例来阐述冒泡原理:

定义一个html, 里面有三个简单的dom 元素:div1,div2, span,div2包含span,div1 包含div2;而它们都在body 下:

界面原型如下:

在这个基础上,我们实现下面的功能:

a.body添加 click 事件监听,当body捕获到event事件时,打印出事件发生的时间和 触发事件的节点信息:

当我们依次点击"This is span",div2,div1,body后,输出以下信息:

分析以上的结果:

无论是body,body 的子元素div1,还是 div的子元素div2,还有 span, 当这些元素被点击click时,都会产生click事件,并且body都会捕获到,然后调用相应的事件处理函数。就像水中的气泡从底往上冒一样,事件也会往上传递。

事件传递的示意图如下所示:

一般地,事件在传递过程中会有一些信息,这些是事件的组成部分:事件发生的时间+事件发生的地点+ 事件的类型+事件的当前处理者+其他信息,

完整的html代码如下:

Javascript 事件冒泡机制详细介绍

b.终止事件的冒泡

我们现在想实现这样的功能,在div1 点击的时候,弹出 "你好,我是最外层div。",点击div2 的时候,弹出 "你好,我是第二层div";点击span 的时候,弹出"您好,我是span。"。

由此我们会有下面的javascript片段:

预期上述代码会单击span 的时候,会出来一个弹出框 "您好,我是span。" 是的,确实弹出了这样的对话框:

然而,不仅仅会产生这个对话框,当点击确定后,会依次弹出下列对话框:

这显然不是我们想要的! 我们希望的是点谁显示谁的信息而已。为什么会出现上述的情况呢? 原因就在于事件的冒泡,点击span的时候,span 会把产生的事件往上冒泡,作为父节点的div2 和 祖父节点的div1也会收到此事件,于是会做出事件响应,执行响应函数。现在问题是发现了,但是怎么解决呢?

方法一:我们来考虑一个形象一点的情况:水中的一个气泡正在从底部往上冒,而你现在在水中,不想让这个气泡往上冒,怎么办呢?——把它扎破!没了气泡,自然不会往上冒了。类似地,对某一个节点而言,如果不想它现在处理的事件继续往上冒泡的话,我们可以终止冒泡:

在相应的处理函数内,加入 event.stopPropagation() ,终止事件的广播分发,这样事件停留在本节点,不会再往外传播了。修改上述的script片段:

经过这样一段代码,点击不同元素会有不同的提示,不会出现弹出多个框的情况了。

方法二:事件包含最初触发事件的节点引用 和 当前处理事件节点的引用,那如果节点只处理自己触发的事件即可,不是自己产生的事件不处理。event.target 引用了产生此event对象的dom 节点,而event.currrentTarget 则引用了当前处理节点,我们可以通过这 两个target 是否相等。

比如span 点击事件,产生一个event 事件对象,event.target 指向了span元素,span处理此事件时,event.currentTarget 指向的也是span元素,这时判断两者相等,则执行相应的处理函数。而事件传递给 div2 的时候,event.currentTarget变成 div2,这时候判断二者不相等,即事件不是div2 本身产生的,就不作响应处理逻辑。

比较:

从事件传递上看:方法一在于取消事件冒泡,即当某些节点取消冒泡后,事件不会再传递;方法二在于不阻止冒泡,过滤需要处理的事件,事件处理后还会继续传递;

优缺点:

方法一缺点:为了实现点击特定的元素显示对应的信息,方法一要求每个元素的子元素也必须终止事件的冒泡传递,即跟别的元素功能上强关联,这样的方法会很脆弱。比如,如果span 元素的处理函数没有执行冒泡终止,则事件会传到div2 上,这样会造成div2 的提示信息;

方法二缺点:方法二为每一个元素都增加了事件监听处理函数,事件的处理逻辑都很相似,即都有判断 if(event.target == event.currentTarget),这样存在了很大的代码冗余,现在是三个元素还好,当有几个,上百个又该怎么办呢?还有就是为每一个元素都有处理函数,在一定程度上增加逻辑和代码的复杂度。

我们再来分析一下方法二:方法二的原理是 元素收到事件后,判断事件是否符合要求,然后做相应的处理,然后事件继续冒泡往上传递; 既然事件是冒泡传递的,那可不可以让某个父节点统一处理事件,通过判断事件的发生地(即事件产生的节点),然后做出相应的处理呢?答案是可以的,下面通过给body 元素添加事件监听,然后通过判断event.target 然后对不同的target产生不同的行为。

将方法二的代码重构一下:

结果会是点击不同的元素,只弹出相符合的提示,不会有多余的提示。

通过以上方式,我们把本来每个元素都要有的处理函数,都交给了其祖父节点body 元素来完成了,也就是说,span,div2,div1 将自己的响应逻辑委托给body,让它来完成相应逻辑,自己不实现相应逻辑,这个模式,就是所谓的事件委托。

下面是一个示意图:

关于事件代理的问题,以后继续探讨。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

深入理解JS中的Function.prototype.bind()方法 前言对于函数绑定(Functionbinding)很有可能是大家在使用JavaScript时最少关注的一点,但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持th

javascript对浅拷贝和深拷贝的详解 下面小编就为大家带来一篇浅谈JavaScript中面向对象的的深拷贝和浅拷贝。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。1.浅拷贝:复制一份

JSON对象 详解及实例代码 前面的话json(javascriptobjectnotation)全称是javascript对象表示法,它是一种数据交换的文本格式,而不是一种编程语言,用于读取结构化数据。年由DouglasCr

标签: Javascript 事件冒泡机制详细介绍

本文链接地址:https://www.jiuchutong.com/biancheng/373604.html 转载请保留说明!

上一篇:javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

下一篇:深入理解JS中的Function.prototype.bind()方法(js中...用法)

  • 个税身份证验证怎么弄
  • 邮政能否为固定业户代开增值税普通发票
  • 劳务与临时工的区别
  • 清产核资账务处理方法
  • 土地结转会计分录是什么
  • 什么时候应做资产减值准备?
  • 期初未交增值税借方余额
  • 劳务派遣简易征收备案
  • 委托贷款对方单位不还
  • 股权转让的违约条款
  • 营改增后挂靠开票作收入吗?
  • 合同印花税如何做账
  • 如何向税务局申请开发票
  • 固定资产抵扣税金算增值税吗怎么算
  • 做内账有风险还是做外账有风险
  • 公司一季度报表一般是什么时候出
  • 退休人员取得单位证明
  • 小规模纳税人和一般纳税人哪个好
  • 企业公益救济性工作总结
  • 小规模纳税人缴税计算
  • 汽车加油票可以开专票吗
  • 营改增后哪些费用可以抵扣
  • 税控设备 抵减
  • 上月计提费用本月怎么做账
  • 应付职工薪酬年底怎么结转
  • 电脑图标怎么在下面显示
  • 电脑显示器模糊不清晰是什么原因
  • 金银镶嵌首饰在哪个环节交消费税
  • 直接计入当期利润的利得,即企业非日常
  • linux查看du
  • php在apache中有哪些工作方式
  • php中session和cookie的区别说法错误的是
  • 人工智能导论报告
  • 一借多贷的会计分录怎么写
  • 期间费用的含义
  • php stl
  • cpu和gpu性能对比
  • thinkphp框架介绍
  • 按适用税率计税销售额与应税货物销售额不一致
  • qt+opencv教程
  • 经典目标检测算法
  • php自定义变量的方法是
  • 红冲上年度收入怎么做凭证
  • mac datagrip
  • 大型广告牌制作材料
  • java面试相关
  • 暂估价与发票价的区别
  • 接受捐赠按什么价值入账
  • sqlserver批量更新存储脚本
  • 数据库用户名称
  • 专利权的入账价值包括资本化支出吗
  • 增值税直接计算法间接计算法举例
  • 企业丢失专用发票税务机关如何处理
  • 筹资费用和财务费用一样吗
  • 分公司抬头发票总公司可以抵扣吗
  • 外贸企业进项税转出怎么申报
  • 差旅费账务处理的摘要
  • 纳税申报准备什么材料
  • 怎么样打印自己想要的内容
  • 工程费用科目
  • 固定资产收到专票怎么做账
  • 建筑公司项目
  • centos怎么样
  • linux系统ftp服务
  • 系统播放音乐
  • Win7系统打开D盘文件后怎么没有后退箭头
  • win7清洗打印机喷头步骤
  • win8声音小怎么解决
  • jquery 定位
  • js数组的操作指令有哪些
  • jquery使用方法
  • 事务所是干什么的会计
  • 银行税务代扣需要什么材料
  • 全年一次性奖金怎么申报个税
  • 玉林税务局班子成员
  • 融资租赁公司购进车辆账务处理
  • 怎么判断买的盐是不是真的
  • 公办幼儿园和企办幼儿园区别
  • 财税公众号名称大全
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设