每個 event 都有一個event.bubbles
屬性,可以知道它可否冒泡。(ref:W3定義的Event Interface)
當然 W3 DOM Level 3 Events 的細則里已經附上這個表格了:
Event Type | Bubbling phase |
---|---|
abort | ✗ |
beforeinput | ✔ |
blur | ✗ |
click | ✔ |
compositionstart | ✔ |
compositionupdate | ✔ |
compositionend | ✔ |
dblclick | ✔ |
error | ✗ |
focus | ✗ |
focusin | ✔ |
focusout | ✔ |
input | ✔ |
keydown | ✔ |
keyup | ✔ |
load | ✗ |
mousedown | ✔ |
mouseenter | ✗ |
mouseleave | ✗ |
mousemove | ✔ |
mouseout | ✔ |
mouseover | ✔ |
mouseup | ✔ |
resize | ✗ |
scroll | ✔ |
select | ✔ |
unload | ✗ |
wheel | ✔ |
還附上了 Legacy Events(舊瀏覽器支持的非標准遺留事件)的 bubble 屬性。
Event Type | Bubbling phase |
---|---|
DOMActivate | ✔ |
DOMAttrModified | ✔ |
DOMCharacterDataModified | ✔ |
DOMFocusIn | ✔ |
DOMFocusOut | ✔ |
DOMNodeInserted | ✔ |
DOMNodeInsertedIntoDocument | ✗ |
DOMNodeRemoved | ✔ |
DOMNodeRemovedFromDocument | ✗ |
DOMSubtreeModified | ✔ |
keypress | ✔ |
H5 還定義了一些新事件:
- media相關事件,都不冒泡
- drag相關事件
dragstart
、drag
、dragenter
、dragexit
、dragleave
、dragover
、drop
、dragend
均冒泡 - History相關事件:
popstate
,hashchange
冒泡(從window開始……所以意義在哪里),pagetransition
不冒泡
還有很多H5新事件,大多在草案階段,就不一一翻開了。
此外,這里還有一個關於IE的事件列表,http://www.feiesoft.com/html/events.html
事件冒泡是我們實現事件代理(委托)的關鍵,在avalon1.6中,默認讓能冒泡的事件都使用事件代理實現了!
var canBubbleUp = { click: true, dblclick: true, keydown: true, keypress: true, keyup: true, mousedown: true, mousemove: true, mouseup: true, mouseover: true, mouseout: true, wheel: true, mousewheel: true, input: true, change: true, beforeinput: true, compositionstart: true, compositionupdate: true, compositionend: true, select: true, cut: true, paste:true, focusin: true, focusout: true, DOMFocusIn: true, DOMFocusOut: true, DOMActivate: true, dragend:true, datasetchanged:true } if (!W3C) { delete canBubbleUp.change delete canBubbleUp.select } //....