js事件冒泡和捕获

之前面试别人的时候总喜欢问事件相关的问题。。。不过很少问如何取消事件冒泡。。因为大家都知道event.stopPropagation()就可以了。。。

我也一直以为这货只能取消事件冒泡。。我还一直以为事件捕获不能取消。。额后来看了<webkit技术内幕>幡然醒悟。。。唉之前看书不仔细啊。。

一个事件会从document一直捕获传递到目标节点。。中间如果触发监听捕获的事件并且调用event.stopPropagation();则此事件不会再继续向目标节点传递。

这个事件到达目标节点之后,默认是不冒泡的。。只有event.bubbles为true的时候才会触发冒泡。

下面这个表格是我让实习生整理的哪些事件冒泡的list。。。仅作为参考。。。

事件何时触发能否
   捕捉
能否冒泡
   event.bubbles
冒泡到哪里
   event.eventPhase
备注
UI事件
   new4
load页面内容完成时在window上触发此事件
   当图像加载完毕时在<img>元素上触发
   当嵌入的内容加载完毕时在<object>元素上面触发

无法冒泡,捕捉和冒泡都是在window上触发,
   event.eventPhase = 2
unload当前页面完全卸载后在window上面触发
   当嵌入的内容卸载完毕后在<object>元素上触发

error当发生JavaScript错误时在window上面触发
   当无法加载图像时在<img>元素上面触发
firefox:window能   img否/
   
chrome
window->window
resize当浏览器窗口被调整到一个新的高度或宽度时
   在window对象上触发
能firefox/
   
否chrome
window->window
scroll浏览器的滚动条位置发生变化时触发此事件document—>windowscrollTop属性
焦点事件/表单事件
   new 16
   new 4
focus当元素获得焦点时触发

blur当元素失去焦点时触发

focusin当元素获得焦点时触发windowchrome IE可以 Firefox不可以
focusout当元素失去焦点时触发windowchrome IE可以 Firefox不可以
select当选中文本框中文本时触发window
change当前元素失去焦点并且元素的内容发生改变时触发window失去焦点后触发
reset当表单中的reset的属性被激发时触发windowform.reset()
submit一个表单被提交时触发window绑定表单,绑定按钮无效
鼠标事件
   new 17
   new 10
click单击主鼠标按钮时触发window
dblclick双击主鼠标按钮时出触发window
mousedown在用户按下了任意鼠标按钮时触发window
mouseup在用户释放鼠标按钮时触发window
mouseenter在鼠标光标从元素外部首次移动到元素范围之内时触发
chrome:光标移动到后代元素不会触发
   firefox:除了不冒泡和mouseover一样
mouseleave在位于元素上方的鼠标光标移动到元素范围之外时触发
chrome:光标移动到后代元素不会触发
   firefox:除了不冒泡和mouseover一样
mousemove当鼠标指针在元素内部移动时重复触发window
mouseout在鼠标指针位于一个元素的上方,然后用户将其移入
   另一个元素时触发
window又移入的另一个元素可能位于前一个元素的外部,
   也可能是这个元素的子元素。
mouseover在鼠标指针位于一个元素的外部,然后用户将其首次
   移入另一个元素边界之内时触发
window又移入的另一个元素可能位于前一个元素的外部,
   也可能是这个元素的子元素。
mousewheel用户通过鼠标滚轮滚动页面时触发chromebody—>windowchrome:wheelDelta属性 向上滚+120  向下滚-120
   通过wheelDelta正负判读鼠标滚轮滚动方向
DOMMouseScroll用户通过鼠标滚轮滚动页面时触发firefoxbody—>windowfirefox:detail属性 向上滚+3 向下滚-3
键盘事件
   new 5
   new 7 
keydown当用户按下键盘的任意键时触发,如果按住不放的话,会重复触发此事件
window显示键盘上任意按键的keyCode值
keypress当用户按下键盘的字符键时触发,而且如果按住不放的话,会重复触发此事件
window显示键盘上字符键的ASCII值,包括回车键
   是否按下shift ctrl键 new7
keyup当用户释放键盘上的键时触发window显示键盘上任意按键的keyCode值
拖拽事件
   new 6
drag当某个对象被拖动时触发此事件window绑定被拖拽元素
dragstart当某对象开始被拖动时触发此事件window绑定被拖拽元素
dragenter当被鼠标拖动的对象进入其容器范围内时触发此事件window绑定容器元素
dragleave当被鼠标拖动的对象离开其容器范围内时,或在容器范
   围内释放鼠标按钮时触发此事件
window绑定容器元素
dragend当鼠标拖动结束时触发此事件,即鼠标的按钮被释放window绑定被拖拽元素
dragover当被拖动的对象在另一对象容器范围内拖动时触发此事件window绑定容器元素
文本事件
   new 6
copy当页面当前的被选择内容被复制后触发此事件window
cut当页面当前的被选择内容被剪切时触发此事件window
paste当内容被粘贴时触发此事件window
触摸事件
   new 11
touchstart当手指触摸屏幕时触发window单击触发一次touchstart和一次touchend
touchmove当手指在屏幕上滑动时连续地触发,在这个事件发生期间,调用preventDefault()可以阻止滚动window
touchend当手指从屏幕上移开时触发window
touchcancel当系统停止跟踪触摸时触发window
html5事件
   new 4
contextmenu
   (new 6) 
当浏览者按下鼠标右键出现菜单时触发windowevent.preventDefault()阻止显示浏览器默认的上下文
   菜单
beforeunload在页面卸载前触发,可以通过它来取消卸载并继续使用
   原有界面

必须将event.returnValue的值设置为要显示给用户的
   字符串(对IE和Firefox而言),同时作为函数的值返
   回(对Safari和Chrome而言)
DOMContentloaded在形成完整的DOM树之后就会触发document—>window在图像、JavaScript文件、css文件或其他资源下载前触发
变动事件
   new 15
DOMSubtreeModified在DOM结构中发生任何变化时触发,这个事件在其他任何
   事件触发后都会触发
body—>window
DOMNodeInserted在一个节点作为子节点被插入到另一个节点时触发
   appendChild()、replaceChild()或insertBefore()向DOM
   中插入节点时首先触发
能 window
DOMNodeRemoved在节点从其父节点中被移除时触发
   removeChild()或replaceChild()从DOM中删除节点时首先触发
window


本文标题:js事件冒泡和捕获
本文链接:https://56way.com/p/70.html
作者授权:除特别说明外,本文由 无路 原创编译并授权 小无路 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

发表评论

必填

选填

选填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。