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