JS事件總結

DOM事件的級別

DOM0

• DOM0級事件會在冒泡階段被處理

var btn = document.getElementById('myBtn')
btn.onclick = function(){
    //do something
    //this -> btn
}
//刪除
btn.onclick = null

複製代碼

DOM1標準中沒有涉及事件相關的問題。

DOM2

• 優勢:能夠添加多個事件處理程序

element.addEventListener('click',function(){
    
})//默認冒泡階段觸發
element.addEventListener('click',function(){
    
},false)//冒泡階段觸發
element.addEventListener('click',function(){
    
},true)//捕獲階段觸發
//經過以上匿名函數添加的事件點擊函數，無法移除
var handler = function(){
	//事件處理函數
}
//移除
element.removeEventListener('click',hanler,false)
複製代碼

DOM3:增長了DOM事件的類型

element.addEventListener('keyup',function(){
    
})
複製代碼

DOM事件模型

1. 事件捕獲
2. 事件冒泡

DOM事件流

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

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

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

1. 瀏覽器的實際實現中：第一個接收到事件的對象是window
2. window->document->html->body->....->目標元素->....冒泡->document->window
3. 獲取html節點：document.documentElement

Event對象的常見應用

1. event.preventDefault()
2. event.stopPropagation()
3. event.stopImmediatePropagation()
4. event.currentTarget
5. event.target

自定義事件

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

• event.target返回觸發事件的元素
• event.currentTarget返回綁定事件的元素