[解惑]JavaScript事件机制
群里童鞋问到关于事件传播的一个问题:“事件捕获的时候,阻止冒泡,事件到达目标之后,还会冒泡吗?”。
初学 JS 的童鞋经常会有诸多疑问,我在很多 QQ 群也混了好几年了,耳濡目染也也收获了不少,以后会总结下问题的结论,顺便说说相关知识的扩展~
如果贸然回答还会冒泡,这不太好的,稍微严谨点考虑 0级 DOM 事件模型的话,这个答案是否定的。但是在 2级 DOM 事件模型中,答案是肯定的,这个问题值得探讨记录下。
本文地址:http://www.cnblogs.com/hustskyking/p/problem-javascript-event.html
一、问题结论
netscape 和 微软 曾经的战争还是比较火热的,当时, netscape 主张捕获方式,微软主张冒泡方式。后来 w3c 采用折中的方式,平息了战火,制定了统一的标准——先捕获再冒泡。
- document 往事件触发地点,捕获前进,遇到相同注册事件立即触发执行
- 到达事件位置,触发事件(多谢 @糖果果 指出 问题 ,@update 14/2/19 如果该处既注册了冒泡事件,也注册了捕获事件,按照注册顺序执行)
- 事件触发地点往 document 方向,冒泡前进,遇到相同注册事件立即触发
这么说很多人比较迷糊,我们在注册事件的时候,通常使用的是 捕获 或者 冒泡 的 一种:
obj.addEventListener("click", func, true); // 捕获方式
obj.addEventListener("click", func, false); // 冒泡方式
事件只会因为捕获或者冒泡触发一次。举个栗子:
点击 s2,结果是:
因为这里采用的是捕获模式,从 document 往 s2 走,依次发现 s1 和 s2 都有注册捕获事件,于是便触发了,然后冒泡,没找到冒泡事件,不执行任何操作。如果将 true 改成 false,可以看到结果相反。为了更好的让你理解整个事件机制,我给他们的捕获和冒泡模式下都注册事件:
结果真是太清晰了:
二、误区
指出两个误区。
1. 在同一个对象上注册事件,并不一定按照注册顺序执行
这一点,从上面的例子可以看出,你随便打乱四个事件绑定的顺序,结果一般不变!出现这样结果的原因是存在捕获模式和冒泡模式。但是值得注意的是,下面 #5楼 @糖果果 提出的问题,之所以如此是因为事件目的地节点既绑定了冒泡事件也绑定了捕获事件,此时的执行顺序按照绑定的先后顺序执行(情况比较少见)。
2.event.stopPropagation();就是阻止事件的冒泡
这个表述不能说他错误,但是是不完整的,他除了阻止事件的冒泡,还阻止事件的继续捕获,简而言之就是阻止事件的进一步传播。下面的例子可以看到:
结果是输出了 s1.
三、拓展
1. stopImmediatePropagation 的使用
这玩意儿是 w3c 的东西,使用的也不是特别多,我们知道 stopPropagation 可以阻止事件的进一步传播,但是他阻止不了该元素上绑定的其他函数的执行,比如我们在 obj 上绑定了 func1 和 func2,如果我们在 func1 中使用了 stopPropagation ,那 func2 依然还是会执行出来。倘若这里使用 stopImmediatePropagation,结果就不一样了,他不仅阻止事件的传播,还阻止 func2 的执行。如:
结果是:
而改成evt.stopImmediatePropagation();之后,阻止了第二个监听事件的触发:
结果是:
2. setCapture 和 releaseCapture
这两个是 IE 下的事件绑定函数,只要我们在某个元素上 setCapture 了,那么你在任何地方的鼠标操作(mouseXXX之类的动作)都会在这个元素上触发(前提是你在这个元素上绑定了事件),releaseCapture 或者本窗口失去聚焦才会释放这个绑定~
四、小结
对于此类知识的学习,应该查阅官方点的文档,或者看看《JavaScript权威指南》的解说,后期会经常整理诸如此类的问题。若有疑问,可以在下方评论中提出。
[解惑]JavaScript事件机制的更多相关文章
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- 【探讨】javascript事件机制底层实现原理
前言 又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把 我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
- JavaScript事件机制——细思极恐
JavaScript事件机制,也有让人深思的东西.在一开始未深入了解,我头脑里有几个问题发出: 1. 自下而上(冒泡)事件怎么写,自上而下(捕获)又是怎么写? 2. 捕获型和冒泡型同时设置,谁生效? ...
- 重温javascript事件机制
以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...
- 总结JavaScript事件机制
JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...
- javascript事件机制
① javascript绑定事件的方式 http://blog.iderzheng.com/dom-javascript-event-binding-comparison/ ② javascript事 ...
- 对JavaScript事件机制的一点理解
JavaScript通过事件机制实现了异步操作,这种异步操作可以使CPU可以在IO任务的等待中被释放出来处理其他任务,等待IO结束再去处理这个任务.这个是一个基本的事件机制. 那么是不是说事件从监听到 ...
- JavaScript——事件机制
事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详细介绍JavaScript的事件机制, ...
随机推荐
- 卸载oracle 11g grid软件
一,使用deinstall 同样,卸载grid软件在11g中也推出了了卸载工具deinstall卸载同卸载oracle数据库软件 具体可参考:Behaviour of the Oracle De-in ...
- 【python坑记录】
python的sort函数使用的时候有一个参数cmp.一定注意这里返回值要用1和-1.不能True和False!!!
- IIS设置默认主页无效
服务器系统:Windows server 2008 R2 IIS版本:7.5 IIS中部署一个dotnet framework 3.5的网站应用程序,设置"默认文档"为:index ...
- js倒计时
/** * 启动,秒杀倒计时 * totalSecond:剩余秒数 * showTime(tm):回调函数,其中tm={day:"",hour:"",min:& ...
- SSH框架整合(全注解)
全部jar包 目录结构 配置案例 package cn.yzu.Tbook.action; import javax.annotation.Resource; import org.apach ...
- iOS SQLite3的使用
1.创建可修改的数据库文件 //应用包内的内容是不可写的,所以需要把应用包内的数据库拷贝一个副本到资源路径去 - (void)createEditableDatabase{ BOOL success; ...
- elasticsearch-1.3.0 之索引代码粗略梳理
elasticsearch-1.3.0 发送请求 创建 [root@centos ~]# curl -XPUT 172.16.136.159:9200/customer?pretty { " ...
- dom4j解析示例
收藏信息.xml <?xml version="1.0" encoding="GB2312" standalone="no"?> ...
- BestCoder Round 69 Div 2 1001&& 1002 || HDU 5610 && 5611
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5610 如果杠铃总质量是奇数直接impossible 接着就考验耐心和仔细周全的考虑了.在WA了三次后终于发 ...
- #研发解决方案#iDB-数据库自动化运维平台
郑昀 创建于2015/12/2 最后更新于2015/12/2 关键词:数据库,MySQL,自动化运维,AutoDDL,刷库,帐号授权,审核,回滚 提纲: 数据库自动化运维什么?别人家是怎么玩的? 我们 ...