能冒泡的事件


每個 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相關事件 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
}
//....


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM