位置: 编程技术 - 正文

详解javascript事件冒泡

编辑:rootadmin

推荐整理分享详解javascript事件冒泡,希望有所帮助,仅作参考,欢迎阅读内容。

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

事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流:一.什么是事件流:文档对象模型(DOM)是一个树形结构,可以形象的用下图表示。

详解javascript事件冒泡

如果一个html元素触发事件,那么这个事件就会在DOM树中的触发节点和根节点之间按照一定的顺序传播,所有经过的节点都会接收到被触发的事件,这个传播过程被称之为事件流。按照事件的传播顺序,可以将其分为两类,一种是事件冒泡,一种是事件捕获,这里就涉及到本章要介绍的主题了:1.事件冒泡:所谓的时间冒泡就是当一个元素触发一个事件,事件会像是水泡一样,从触发元素向它的所有父节点传播,一直到根节点都会接收到此事件,如果父元素中注册了相应的事件处理函数,那么尽管事件在子节点触发的,在父元素上注册的事件处理函数同样会被触发。例如在上面图示中,如果触发a元素的onclick事件,那么它的父元素p、document和widow都会接收到此事件,并且如果在相应的父元素注册有时间处理函数,那么此事件处理函数将会执行,看一段代码实例:

以上代码的目的是,当点击相应的单元格的时候就会弹出对应单元格中的内容。但是在上面的实现中并不是为每一个单元格注册onclick事件处理函数,而是将onclick事件处理函数注册于单元格的父元素table上,当点击单元格的时候会触发onclick事件,事件还会从从事件对象向上传播,而table元素恰好有注册的onclick事件处理函数,这个时候就会执行此处理函数,当然这里会设置到传递事件对象参数的问题。所有的浏览器都支持事件冒泡。二.事件捕获:事件捕获和事件冒泡恰好相反,当点击一个元素的时候,事件传播的方向是从根元素到触发元素,IE浏览器并不支持,为了跨浏览器支持,所以默认情况下一般都是使用冒泡型事件处理模型。2.javascript阻止事件冒泡代码事件冒泡在某些场景非常的有用,但是有时候也是必须要阻止,下面是一段能够兼容所有主流浏览器的阻止事件冒泡的实例代码。代码实例:

以上代码可以阻止事件冒泡,下面对代码做一下简单注释:二、代码注释:

1.function stopBubble(e) {},此函数用来阻止事件冒泡,参数是个事件对象。 2. if(e&&e.stopPropagation){e.stopPropagation();},判断是否支持stopPropagation,如果支持就使用e.stopPropagation()。stopPropagation()函数IE和IE以下浏览器不支持。 3.window.event.cancelBubble=true,当前IE浏览器使用这个可以阻止事件冒泡。

标签: 详解javascript事件冒泡

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

上一篇:js父页面中使用子页面的方法(js获取父窗口)

下一篇:实例讲解javascript注册事件处理函数(结婚日课实例讲解)

  • 外贸企业的出口收入免征其地方水利建设基金
  • 小规模纳税人批发机动车
  • 现金流量净额正负
  • 建筑行业增值税税负率一般控制在多少合适
  • 增值税16点税降到13点,补缴税款怎么算
  • 房地产企业借款过多的原因
  • 个人所得税交税怎么交的
  • 非货币性资产交换准则
  • 最新的税收政策
  • 未达账项怎么做会计分录
  • 事业单位存货盘亏会计分录
  • 税务审计什么时候进行
  • 没有按时缴纳税属于什么
  • 税控技术服务
  • 健身房税率是多少
  • 地税印花税怎么算
  • 普通发票查不到信息怎么办
  • 开具发票有哪些特殊规定?
  • 加权平均净资产收益率等于企业净利润除以
  • 个税申报状态失败
  • 企业增值税去哪交
  • 将自产货物用于在建工程
  • 样品开发费用怎么记账
  • 金税盘发票显示不出确认
  • 未分配利润怎么处理
  • 炫龙dd3笔记本怎么样
  • 已确认坏账又收回账面价值会减少?
  • 净损益是
  • php extract函数
  • nodejs怎么更新版本
  • 利润表的营业收入是开票金额吗
  • 麒麟软件的linux桌面操作系统
  • 论文导语如何写
  • 微服务框架图
  • 税务发票红字发票怎么开
  • 企业转钱给个人
  • 固定资产处置的会计科目
  • 其他业务收入如何填写申报表
  • 预提费用汇算清缴前取得发票
  • 从农民手中购买粮食税率
  • 个体工商户法人可以变更吗?
  • 应付账款的逾期利息计入什么科目
  • 产品质量监督检查的重点是
  • 不偿还的其他应收款
  • 所得税暂缓缴纳本来是不缴纳
  • 坏账准备转回并收到货款会计分录
  • 贷款罚息会计分录
  • 填制会计凭证要求的是
  • mysql命令行配置
  • Vista下WMC不能播放RMVB解决办法
  • win8系统打不开设置
  • windows10内置应用是哪些
  • linux防御
  • 通过修改注册表来修改chrome配置
  • centos关闭kdump
  • aix操作命令
  • vnc里面的窗口显示不完全
  • win10搜索不到无线网卡
  • w10安装软件提示
  • ms-dos 6.2批处理文件高级指南
  • linux命令shell脚本
  • angularjs4
  • 安卓deprecated
  • python算法简单编程题
  • python生成随机
  • Compact 显示和更改 NTFS 分区上的文件或目录压缩
  • 浏览图片的软件叫什么
  • shell脚本编程100例
  • 九九乘法表报
  • python数据连接
  • unity3d粒子系统创建火花
  • Javascript & DHTML 实例编程(教程)DOM基础和基本API
  • 两个python中内置的数值运算函数
  • jquery 3.5
  • 税务局着装规定文件
  • 建筑垃圾清运属于什么应税服务
  • 高新区税务局发工资时间
  • 智能财税证书含金量如何
  • 税务征管科与纳税人有接触吗
  • 税务行业微信缴税项目是什么消费
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设