位置: 编程技术 - 正文

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

  • 一次性购入固定资产投资收益
  • 从税法经济法角度分析冰冰偷漏税事件?
  • 涉税专业服务是做什么的
  • 印花税的申报依据是什么
  • 收据收到写什么
  • 水利基金在哪个科目核算
  • 商誉减值是在年报还是半年报
  • 公司汽车上牌费入什么科目
  • 购入汽车的增值税可以抵扣差额开具的销项吗
  • 工商登记执照号码怎么查询
  • 权益筹资额计算公式
  • 非居民企业转让财产所得税
  • 出差车费报销申请怎么写
  • 拆迁车间
  • 工程安装公司暂估人工费如何做会计核算?
  • 企业清算期间留抵的税额如何做会计处理?
  • 原材料什么时候结转成本
  • 购买的厂房怎样交税
  • 经济法基础企业所得税好难
  • 拆迁安置房建设流程
  • 预缴税款的税率
  • 劳务费需要预缴税款吗
  • 港口建设费2021年归国家税务总局
  • 资金筹集业务核算实训心得体会
  • 收到收入怎么做分录
  • 外账缺成本费用怎么处理
  • win10怎么改通知
  • 平均应收账款是什么
  • 企业与企业之间进行的电子商务模式是
  • 在win7系统中文件属性有哪些
  • 提供应税服务的纳税义务发生时间
  • 详谈的详是什么意思
  • PHP:pcntl_strerror()的用法_PCNTL函数
  • 未履行的应税合同缴纳印花税
  • tepac接口
  • 购置固定资产用什么凭证
  • thinkPHP5 tablib标签库自定义方法详解
  • laravel框架关键技术解析
  • php使用什么开发工具
  • 税款入库期是什么意思
  • python中模块的用法
  • 购买房屋用于出租属于投资行为吗
  • 私房出租税收
  • 金税盘服务费分录
  • wordpress怎么降级
  • 织梦怎么调用当前栏目下的文章
  • 购销合同交印花税吗怎么交
  • mysql 中文乱码 识别
  • 基本户收到款不入账
  • 建筑安装主要做什么
  • 结转费用后利润怎么算
  • 关税进口增值税缴纳时间
  • 以前年度少计提的工资怎么处理
  • 车辆购置税在哪个app交
  • 养老保险产生的利息怎么来的
  • 待摊费用会计处理
  • 购买银行承兑汇票现金流量表怎么填
  • 融资租赁本金和租金的区别
  • 员工报销没有发票可以从公户转账吗
  • mysql进阶之路
  • 设置和使用电子技术监控设备收集信息
  • 苹果mac最新的系统
  • linux系统ftp服务
  • Linux Kernel 4.10第5个候选版本RTM版发布 2月12日发布正式版
  • win10右下角功能列表不见了
  • 安卓百分百
  • macos unity
  • jQuery使用ajax方法解析返回的json数据功能示例
  • dos常用命令与批处理文件
  • js发送ajax请求
  • 运用javascript制作网页
  • Android java.lang.IllegalArgumentException: pointerIndex out of range
  • 如何让listview提高效率
  • 广东税务人工服务
  • 免税饲料发票怎么开具
  • 国家税务总局并入财政部最新消息
  • 房产税是按套还是按套
  • 预缴税款怎么做账
  • 怎样在网上税务局个人发票能开10万以上?
  • 财政部国家税务总局2021年40号
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设