dom事件

DOM事件的级别

1.DOM0事件，onclick

仅能定义一个事件

// 取消
dom.onclick = null

2.DOM2事件

element.addEventListener(event, function, useCapture)

useCapture--默认false,表示在冒泡阶段执行

取消事件

element.removeListener(event, function, useCapture)

3.DOM3事件
增加了新的监听，比如keyup,blur

DOM事件模型

捕获 冒泡

DOM事件流

捕获，目标，冒泡

DOM事件的捕获的流程

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

Event对象的常见应用

三个阻止，两个对象

// example
var dom1 = document.getElementById('app')
dom1.addEventListener('click', function(e) {
  e.stopPropagation()
})
// 阻止默认事件
event.preventDefault()
// 阻止冒泡
event.stopPropagation()
// 阻止多个事件
event.stopImmediatePropagation()
// 代理事件中的，被监听的元素
event.currentTarget()
// 实际触发的那个dom
event.target()

自定义事件

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