码迷,mamicode.com
首页 > Web开发 > 详细

JS Event handler example - event capture and bubble

时间:2015-06-06 11:47:40      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:

这个example 有一个陷阱,如果测试用的script不写在window.ready事件里,将得不到效果。
技术分享
 
技术分享
事件捕获和事件冒泡是事件流中的两个阶段,任何事件产生时,如点击一个按钮,将从最顶端的容器开始(一般是html的根节点)。浏览器会向下遍历DOM树直到找到触发事件的元素
 
点击button 1:
技术分享
target: button
技术分享
 
至此target node处理完了,继续处理hierarchy树的下一个节点:body. 此时event.target 还是button:
技术分享
然后继续处理body下面的div 节点:
技术分享
找到目的节点了:
技术分享
一旦浏览器找到该元素,事件流就进入事件目标阶段,该阶段完成后,浏览器会沿DOM树向上冒泡直到最顶层容器,看看是否有其它元素需要使用同一个事件。
 
大多数现代库使用冒泡监听,而在捕获阶段处理。浏览器包含一个方法来管理事件冒泡。事件处理程序可以调用stopPropagation告诉DOM事件停止冒泡
技术分享
第二个方式是调用stopImmediatePropagation,它不仅停止冒泡,也会阻止这个元素上其它监听当前事件的处理程序触发。然而,停止传播事件时要小心,因为你不知道是否有其它上层的DOM元素可能需要知道当前事件。
 
 
 

JS Event handler example - event capture and bubble

标签:

原文地址:http://www.cnblogs.com/abapscript/p/4556237.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!