DOM事件

DOM事件的級別

DOM0

var btn = document.getElementById('myBtn')
btn.onClick = function(){
    // do something
    // this -> btn
}
//移除事件綁定
btn = null
複製代碼

DOM1標準制定的時候沒有涉及和事件有關的東西

DOM2級事件

var btn = document.getElementById('myBtn')
//經過匿名函數添加事件處理函數
//經過匿名函數添加的事件處理函數沒法移除
btn.addEventListener('click',function(){
    
},false)//冒泡階段觸發
btn.addEventListener('click',function(){
    
},true)//捕獲階段觸發
//經過具名函數添加事件處理函數
var handler = function(){
   //dosomething
}
btn.addEventListener('click',handler,false)
btn.removeEventListener('click',handler,false)
複製代碼

DOM3只是在DOM2的基礎上增長了一些事件類型

1. keyup等等

DOM事件流

事件流描述的是頁面中接受事件的順序

1. 第一階段：事件捕獲階段
2. 第二階段：處於目標階段
3. 第三階段：冒泡階段

描述DOM事件捕獲的具體流程

1. 瀏覽器的實際實現中：第一個接受到時間的對象window
2. window->document->html(document.documentElement)->body(document.body)->….->目標元素->….冒泡->document->window
3. 獲取html節點：document.documentElement

Event對象的常見應用

1. event.preventDefalut() //阻止默認行爲
2. event.preventPropagation() //阻止事件冒泡
3. event.stopImmediatePropagation()
4. event.currentTarget //當前綁定事件的元素
5. event.target //當前被點擊的元素

自定義事件

var eve = new Event('custome')
btn.addEventListener('custome',function(){
    
})
btn.dispatchEvent(eve)
複製代碼

CustomEvent