js手札--关于事件冒泡与事件捕获
一、冒泡和捕获
IE和Netscape不同
IE是事件冒泡：click事件触发顺序（div -> body -> html）
Netscape是事件捕获：click事件触发顺序（html -> body -> div）
操作方法
- IE：
target.attachEvent(eventName, callback) //只能冒泡 target.detachEvent(eventName, callback)- Netscape类浏览器：
target.addEventListener(eventName, callback) // 冒泡方式 target.removeEventListener(eventName, callback) target.addEventListener(eventName, callback, true) // 捕获方式 target.removeEventListener(eventName, callback, true)（一） IE是事件冒泡
啥也不说，看例子，点击t2区域：
很明显的，由内而外，没啥可说的。我这边没装IE，所以所以测试都是在（chrome，firfox，safari中测试的）。
（二）Netscape是事件捕获
同样点击t2区域，可以见到变成由外而内：
二、阻止冒泡和捕获
IE和Netscape的阻止方式
IE：event.stopPropagation()
Netscape：e.cancelBubble = true;
（一）阻止冒泡
同样点击t2区域，可以见到t3的click事件就不会被触发了。
（二）阻止捕获
同样点击t2区域，可以见到t2的click事件没有被触发。因为我们在触发t3的时候，让捕获停止了，那样t2也就接受不到要触发click的消息了，也就over了。
三、补充
关于Netscape: preventDefault()和IE: event.returnValue
这两个其实和捕获与冒泡一点关系都没有，是用来阻止事件的默认行为的。如：我点击标签，正常说会执行跳转相应网页。但加入preventDefault()后就不会跳转了。
看例子：
照理说我点击了t1, 那应该会正常跳转才对
但加了下面的代码之后，就跳不动了。
总算结束了，每次去查捕获和冒泡的资料都发现会附带着preventDefault，也是懵了。一开始我以为preventEvent是阻止捕获的，stopPropagation是阻止冒泡的，后来发现其实压根就不是这样，也是我看的不仔细啊。唉，路还长着，继续，前行。
关键字：JavaScript, 冒泡, 捕获, netscape
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！