位置: 编程技术 - 正文

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

  • 土地 税
  • 分公司上交总公司营业款如何记账
  • 企业购入免税农产品
  • 小规模入账的收入分录
  • 利润表里的所得税怎么算
  • 转出上年的进项税额怎么做分录
  • 应收账款折扣怎么计算
  • 我的初级备考经历怎么写
  • 增值税发票本月没用完可以下月用吗
  • 企业为职工社保补缴怎么办理
  • 认证后的发票可以留抵下月抵扣吗
  • 土地增值税纳税地点
  • 公司筹建期的个税怎么交
  • 查企业有记录吗
  • 小规模纳税人增值税超过30万怎么纳税
  • 承兑汇票怎么换算
  • 服务费减免税会计处理
  • guest的作用
  • 去除页眉的横线快捷方式
  • 车船税收费标准2023年多少钱
  • 坏老狼告诉我们什么道理
  • Linux系统中怎么定位到java代码的方法级
  • 开发产品变成什么科目了
  • win10通讯
  • PHP:curl_multi_strerror()的用法_cURL函数
  • 怎么做合同
  • 用支票购入厂部办公用品2000元,车间办公用品1000元
  • vue3中使用require
  • 发包工程补付工程款分录
  • yolov8训练自己的数据
  • linux 运行php
  • 技术维护服务费
  • 微信手机充值怎么自定义金额
  • echarts快速上手
  • progress的用法及短语
  • 支付押金无法收取怎么办
  • 公司采购一直没走对公付款怎么处理
  • 建厂购买材料的会计科目
  • 所得税汇算清缴需要调增的项目
  • 电子商业汇票是指
  • 固定什么意思
  • 新会计准则规定
  • 工程施工二级设哪些明细
  • mysql索引最大数量
  • 信息技术服务增值税税负率是多少
  • 赠送给客户的商品是否要计入费用?
  • 商业汇票的承兑银行必须具备下列条件
  • 预付房租摊销
  • 零余额账户用款额度是什么意思
  • 股权转让是否需要全体股东签字
  • 储备基金是什么
  • 财务费用在贷方负数表示什么
  • 收到费用报销单怎么做记账凭证
  • 商品未入库直接销售怎么记账
  • 营业利润包括资本化支出吗
  • 没有什么费用
  • centos7.6无法远程
  • mac下安装anaconda
  • solaris 创建文件
  • win7更改电脑设置在哪里
  • Win10 Mobile RS2预览版14915上手视频评测
  • cmd是什么意思 视频
  • win7系统监控
  • js页面点击怎么随机生成图片
  • android studio jni
  • linux系统中可用于添加用户账号
  • jquery操作dom
  • toolkit:eclipse导入下载好的android系统源码
  • 背景透明度设置
  • angular获取数据给后端
  • unity3d操作
  • jquery判断是否有某个class
  • unity官方插件
  • Android音乐播放器评论功能怎么实现
  • 深入理解Python特性 达恩·巴德尔
  • 北京同仁堂怎么挂专家号
  • 云南国税电子税务局官网登录
  • 进口汽车零部件编码查询
  • 个人所得税全员申报什么时候开始的
  • 准予扣除是什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设