DOM事件类

DOM事件的级别

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

事件模型

捕获与冒泡

事件流

事件通过捕获到达目标元素，然后从目标元素冒泡到window对象

DOM事件捕获的具体流程

window -> document -> html (通过document.documentElement可以获取HTML节点) -> body -> .... -> 目标元素

冒泡流程

跟捕获流程相反

Event对象

event.preventDefault() 阻止默认行为
event.stopPropagation() 阻止冒泡
event.stopImmediatePropagation() 当绑定了两个事件，触发事件A时加入这个函数可以阻止事件B的触发
event.currentTarget 绑定事件的DOM
event.target 当前鼠标点击的DOM

自定义事件

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

CustomEvent 跟 Event用法一样，区别在于前者可以添加参数