• DOM事件的級別
• DOM事件模型
• DOM事件流
• 描述DOM時間捕獲的具體流程
• Event對象的常見應用
• 自定義事件

DOM事件的級別

DOM0 element.onclick = function(){}
DOM2 element.addEventListener('click', function(){}, false)
DOM3 element.addEventListener('keyup', function(){}, false)

DOM事件模型

捕獲 冒泡

DOM事件流

捕獲 目標階段 冒泡

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

window - document - html - body - 目標元素

Event對象的常見應用

· event.preventDefault()
· event.stopPropagation() 阻止父級元素冒泡
· event.stopImmediatePropagation() 阻止當前元素其他事件觸發
· event.currentTarget
· event.target

自定義事件

var eve = new Event("custome")
el.addEventListener('custome', function(){
  console.log('custome')
})
ev.dispatchEvent(eve)