DOM事件

• 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)