每个 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
}
//....