DOM事件的級(jí)別

1.DOM0事件，onclick

僅能定義一個(gè)事件

// 取消
dom.onclick = null

2.DOM2事件

element.addEventListener(event, function, useCapture)

useCapture--默認(rèn)false,表示在冒泡階段執(zhí)行

取消事件

element.removeListener(event, function, useCapture)

3.DOM3事件
增加了新的監(jiān)聽，比如keyup,blur

DOM事件模型

捕獲 冒泡

DOM事件流

捕獲，目標(biāo)，冒泡

DOM事件的捕獲的流程

window,document,html,body, somDom...

Event對(duì)象的常見應(yīng)用

三個(gè)阻止，兩個(gè)對(duì)象

// example
var dom1 = document.getElementById('app')
dom1.addEventListener('click', function(e) {
  e.stopPropagation()
})
// 阻止默認(rèn)事件
event.preventDefault()
// 阻止冒泡
event.stopPropagation()
// 阻止多個(gè)事件
event.stopImmediatePropagation()
// 代理事件中的，被監(jiān)聽的元素
event.currentTarget()
// 實(shí)際觸發(fā)的那個(gè)dom
event.target()

自定義事件

  var newEvent = new Event('myevent')
  window.addEventListener('myevent', function() {
    console.log('happen my event')
  })
  window.dispatchEvent(newEvent)