位置: 编程技术 - 正文

详解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注册事件处理函数(结婚日课实例讲解)

  • 非征税期抄税如何解决
  • 企业销售不动产增值税税率
  • 一般纳税人认定书
  • 个体户需要税务申报吗?
  • 更正申报多交的个税
  • 财产租赁合同印花税优惠政策
  • 三方协议缴款账户状态错
  • 意外伤害险进项税转出
  • 销售额负数 如何填报报表
  • 固定资产盘亏是营业外支出吗
  • 让渡资产使用权收入计入什么科目
  • 挂应付账款之后发现用现金付款如何调整?
  • 公司向税务局缴纳环保税
  • 利息收入交税会计分录怎么做
  • 亏本销售商品如何做其会计分录?
  • 单品销售的方法
  • 核定征收的企业需要做账吗
  • 不动产有法律效力吗
  • 金税四期什么时候正式上线
  • 收到发票后怎么处理
  • 电话费发票个人抬头可以税前扣除
  • 提供有形动产租赁服务的增值税税率是
  • 个人将房产无偿赠与他人应交个人所得税吗
  • 技术服务的大类包括
  • 车间报销办公用品费
  • php for break
  • 准备金要求定义
  • 分包工程账务处理
  • 同一控制下控股合并在合并日合并报表编报正确的有
  • 往境外支付培训费怎么退
  • php使用自定义函数编程求半径r的圆的周长和面积
  • 营业执照上住所和经营场所
  • winform 文件上传
  • 手把手教你用Excel制作考勤表
  • php分页思路
  • 出口货物视同内销征税的会计核算?
  • reset=target
  • 购买短期股票
  • 商会年会活动策划方案模板
  • 销售收入和营业收入的关系
  • python第三方库安装教程
  • 个人独资企业法主要内容
  • 简单的记账方法叫什么
  • 购买办公用品属于什么凭证类型
  • 发票审核中是什么意思
  • 专项应付款和政府补助的区别
  • 法人向公司借款如何做账
  • 税局代开专票对方隔月退回重开如何做账务处理呢?
  • 税控设备抵减税款分录
  • 预付一年的房租怎么做账
  • 小规模纳税人减按1%怎么计算
  • 采购原材料怎么做分录
  • 外币折算差额怎么计算
  • 未开票收入如何记账
  • 行政事业单位预算一体化账务处理
  • 固定资产实务训练题目及答案
  • 留存收益属于什么会计要素
  • 没有工会的企业收到返还的工会经费派什么用场
  • Mysql5.7.14 linux版密码忘记完美解决办法
  • windows8.1开机
  • win10小娜语音激活
  • freebsd配置dns
  • xp系统怎么强制结束进程
  • hdaudpropshortcut.exe是什么进程 作用是什么 hdaudpropshortcut进程查询
  • win10系统如何解除屏保
  • Windows 7+Fedora 16启动项问题讲解
  • 解决的英文
  • nodejs cicd
  • python编程中的函数
  • 用javascript写简单网页
  • jquery双击
  • jquery.js插件
  • python xml dom
  • js实现滚动条
  • javascript例题
  • 税务如何稽查
  • 东莞市官网
  • 广东电子发票开票软件?
  • 处理报废固定资产
  • 珠海斗门井岸镇邮编
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设