位置: 编程技术 - 正文

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中...用法)

  • 如何在天猫平台抢茅台
  • 同一控制下长期股权投资相关税费
  • 免税外汇商品
  • 善意取得增值税专用发票企业所得税处理
  • 电信电话费计入成本吗
  • 个人转款到对公账户会计分录
  • 上月暂估计提的费用次月来发票怎么写会计分录?
  • 跨年的发票作废账务如何处理
  • 公司进货可以计提折旧吗
  • 跨年发票还可以入账吗
  • 税控盘基本信息设置
  • 普通发票企业有用吗
  • 诉讼费和保全费什么时候能退还
  • 这个月发票领完了,还可以领吗?
  • 职工教育法
  • 现金盘亏账务处理分录
  • 折扣折让的账务处理
  • 定额发票上除了发票章还有其他章吗
  • 一般纳税人差额申报表填写
  • 非现金资产包括
  • 银行承兑汇票没有提示付款
  • 如何固定iPhone墙纸
  • 营改增后一般纳税人税率
  • 教你如何正确选择轮胎
  • 2020 php 薪资
  • linux-4.4
  • 预付款无法收回账务处理
  • 股票的交易费用是怎么算的
  • 代发工资如何合理避税
  • 发放应付职工薪酬的账务处理
  • 享受企业所得税优惠政策的农产品初加工范围
  • linux-base
  • 赠送客户商品分录
  • 何为前端后端
  • session跨域导致失效
  • 图像融合名词解释
  • 手把手教你win7换主板不重装系统的方法
  • python的复制命令
  • 仓库折旧会计分录
  • 购买备用品会计分录
  • sql server 判断数据是否存在
  • 帝度官网 说明书
  • 预收账款可以用什么科目核算
  • 网上申请发票要钱吗
  • 管理费用属于费用类吗
  • 欠款收不回来了会计分录
  • 结转生产成本是不是成品入库
  • 盘盈固定资产明细表
  • 金融放贷工作具体做什么
  • 经营过程中借股怎么处理
  • 内账应收应付怎么对账
  • 汽车租赁入什么费用
  • 以前多计提的税款怎么办
  • 为什么车船税没有发票
  • 持有至到期投资改名为
  • 场地租用招标方案怎么写
  • sql server中一个数据库可以有多个文件组
  • sql游标用法
  • window10系统邮件设置在哪里
  • windows server 2008 硬盘格式
  • centos7 阿里云 yum
  • win10周年纪念版
  • thinkpad 8高配版
  • win7桌面提示7601
  • mac电池不能被识别吗
  • sendmail邮件服务器
  • cocos2d
  • 铁嘴王指什么动物
  • Particle system study section 1
  • Java反射机制和动态代理机制
  • dos脚本 菜鸟教程
  • nodejs与springboot结合
  • android如何运行项目
  • node.js中的http.createClient方法使用说明
  • python如何安装各种库
  • python压缩文件为gz
  • 新收入准则租赁业务
  • 增值税申报表如何填报
  • 宁波税务局qzzn
  • 个人所得税优惠政策最新2023年度
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设