事件模型

一、事件模型
1、DOM0级 — 原始事件模型
特点：可直接在html标签中绑定事件句柄，或者在dom节点上绑定。函数在触发冒泡阶段触发。
缺点：只能绑定一个同类型事件函数，后面的会覆盖前面的函数。
2、DOM2级 — 标准事件模型
特点：通过addEventListener方法绑定，可绑定多个同类型处理函数。有三个阶段
（1）捕获阶段，从document开始往dom结构里面找
（2）事件函数执行
（3）事件往外层冒泡，经过节点如有绑定事件函数则触发。
用处：事件代理，如果多个子元素都需要绑定事件函数，可以在其父元素上绑定函数在事件冒泡阶段触发。
添加事件监听：
addEventListener( type, callback, useCapture )
事件函数中的api使用：
（1）获取事件对象
let event = e || window.event
（2）阻止默认行为（防止点击按钮自动提交表单、a标签跳转）
evetnt.preventDefault()
（3）阻止事件冒泡
event.stopPropagation() || event.cancelBubble = true

let dom = document.getElementById('Button');
dom.addEventListener( 'click' , (e) =>{
    let evet = e || window.event // ie浏览器将事件对象放在全局对象上;
  console.log('click')
  event.preventDefault()
  if(event.stopPropagation){
      event.stopPropagation()
  }else{
      event.cancelBubble = true
  }
} ,false)