关于javascript:能冒泡的事件

37次阅读

共计 1468 个字符,预计需要花费 4 分钟才能阅读完成。

每个 event 都有一个 event.bubbles 属性,能够晓得它可否冒泡。(ref:W3 定义的 Event Interface)

当然 W3 DOM Level 3 Events 的细则里曾经附上这个表格了:

Event TypeBubbling 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 TypeBubbling phase
DOMActivate
DOMAttrModified
DOMCharacterDataModified
DOMFocusIn
DOMFocusOut
DOMNodeInserted×
DOMNodeInsertedIntoDocument
DOMNodeRemoved×
DOMNodeRemovedFromDocument
DOMSubtreeModified
keypress

H5 还定义了一些新事件:

  • media 相干事件,都不冒泡
  • drag 相干事件 dragstartdragdragenterdragexitdragleavedragoverdropdragend均冒泡
  • History 相干事件:popstatehashchange冒泡(从 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

}

//....

正文完
 0