三种事件模型

• 1、DOM0事件模型（原始事件模型）

  • 通过元素属性来绑定事件<button onclick="click()">click</button>

  • 先获取元素，然后以赋值形式绑定事件

    const btn = document.getElementById('btn')
    btn.onclick = function(){}
    

  解除：
  btn.onclick = null
  缺点：
  一个dom节点只能绑定一个事件，再次绑定会覆盖之前的

• 2、DOM2事件模型

  • 新增冒泡和捕获的概念，支持一个元素节点绑定多个事件
  • 共三个阶段：
    • 1、事件捕获阶段
    • 2、事件处理阶段
    • 3、事件冒泡阶段

  // 事件绑定
  // 第三个参数useCapture指定事件执行阶段，true捕获阶段执行，false冒泡阶段执行，默认false
  btn.addEventListener('click',function(){
    console.log('btn')
  },true)
  // 解除绑定
  btn.removeEventListener('click', btnClick); // 解除绑定
  // 阻止传播
  event.stopPropagation()
  // stopImmediatePropagation 阻止事件并阻止其他注册事件
  // 阻止默认
  event.preventDefault()
  

• 3、IE事件模型
  只支持冒泡，所以事件流程两个阶段：

  • 1、事件处理阶段
  • 2、事件冒泡阶段

  // 绑定事件
  el.attachEvent(eventType, handler)
  [object].attachEvent("onclick",click1)
  // 移除事件
  el.detachEvent(eventType, handler)
  // 停止传播：
  window.event.cancelBubble=true;