前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >浅谈事件冒泡

浅谈事件冒泡

作者头像
寒月十八
发布2018-01-30 11:33:12
5220
发布2018-01-30 11:33:12
举报
文章被收录于专栏:前端架构与工程

前端开发中不可避免会接触到事件冒泡,今天简单记录一下处理事件冒泡的一点经验,谈不上心得,聊当抛砖引玉。

不谈移动端,以PC浏览器的click事件为例。

事件冒泡机制最初是由微软提出的,而事件捕捉机制是由NetScape提出的,这两种机制是完全不同的事件流处理机制,平常较多地被认为是事件冒泡的两种方式,其实是不严谨的。

  • 冒泡事件流

简单来讲,以click为例,冒泡事件流就是从被点击的节点一层层的向上冒泡,直到<body>节点,这也是被大多数人熟知的方式,在此便不再赘述。

IE浏览器通过attachEvent()detachEvent()方法来添加和删除事件监听。

  • 捕捉事件流

NetScape提出的捕捉式事件流处理机制,跟冒泡事件流完全相反,是从最外层容器(也就是<body>)开始往里传递事件。

IE内核以外的浏览器通过addEventListener()来添加事件监听。

值得一提的是,addEventListener(type,handler,is)有三个参数,前两个参数分别是事件类型和事件响应函数,第三个参数是个Boolean值,被普遍使用的是false,当它被设置为false的时候,捕捉事件流跟冒泡事件流的顺序是一致的,也就是从里往外传递。栗子如下:

See the Pen ZYGYxB by Joe (@ihardcoder) on CodePen.

弹出窗口的顺序为3-2-1。

当第三个参数被设置为true时,便采用原始的捕捉事件流,也就是跟冒泡事件流相反的顺序,栗子如下:

See the Pen LEVEBm by Joe (@ihardcoder) on CodePen.

弹出窗口的顺序为1-2-3。

当然,平时被使用较广的是冒泡式的传递方式,但捕捉事件流也有其用武之地。IE9以上的浏览器也支持addEventListener()方法。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2015-05-05 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档