js事件冒泡和捕获

js事件冒泡和捕获

原文链接

作者：小小小无路 发布于：2016-2-28 17:09 Sunday

之前面试别人的时候总喜欢问事件相关的问题。。。不过很少问如何取消事件冒泡。。因为大家都知道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—>window	scrollTop属性
焦点事件/表单事件 new 16 new 4	focus	当元素获得焦点时触发	能	否
	blur	当元素失去焦点时触发	能	否
	focusin	当元素获得焦点时触发	能	能	window	chrome IE可以 Firefox不可以
	focusout	当元素失去焦点时触发	能	能	window	chrome IE可以 Firefox不可以
	select	当选中文本框中文本时触发	能	能	window
	change	当前元素失去焦点并且元素的内容发生改变时触发	能	能	window	失去焦点后触发
	reset	当表单中的reset的属性被激发时触发	能	能	window	form.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	用户通过鼠标滚轮滚动页面时触发chrome	能	能	body—>window	chrome：wheelDelta属性 向上滚+120 向下滚-120  通过wheelDelta正负判读鼠标滚轮滚动方向
	DOMMouseScroll	用户通过鼠标滚轮滚动页面时触发firefox	能	能	body—>window	firefox: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)	当浏览者按下鼠标右键出现菜单时触发	能	能	window	event.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