DOM事件

一、DOM事件的级别

1. DOM0级

• 写法：element.onclick=function(){}或者或者element.onclick=btnclick是一种比较传统的方式，把一个函数(或者匿名函数)赋值给一个事件的处理程序属性
• 优点：简单，跨浏览器的优势（兼容所有浏览器）。
• 缺点：不能给元素添加多个事件处理程序，只能添加一个，如果添加多个事件处理程序，后面的会覆盖前面的。
• 删除事件：element.onclick=null;

2. DOM1级

• DOM1级主要隐射文档没有事件，没有设计跟事件相关的东西，所以跳过，但是DOM1级标准还是存在

3. DOM2级

• 写法：element.addEventListener('click',function(){},false)false为默认值，代表支持冒泡
• 优点，可以给元素添加多个事件处理程序，这些事件处理程序按照他们的顺序执行。
• 删除事件：element.removeEventListener('click',function(){},false)

4. DOM3级

• 写法：跟DOM2级一样，就是增加了许多事件类型，包括鼠标事件，键盘事件

二、事件模型

事件模型.png

• 包括捕获和冒泡（ie用的是事件冒泡）
• 捕获是从上往下到达目标元素
• 冒泡是从当前元素，也就是目标元素往上到window。是两个过程

三、事件流

事件流

• 浏览器在为这个当前页面与用户做交互的过程中，比如我点击了这个鼠标左键，这个左键是怎么传到页面上，还有怎么响应的。
• 事件流分三个阶段，第一阶段是捕获，第二阶段是目标阶段，比如点击的这个按钮，这个按钮就是目标阶段，事件通过捕获到达目标元素，就到达了目标阶段，第三个阶段是冒泡阶段，从目标元素再上传到window对象，就是冒泡的过程。

四、DOM事件捕获冒泡的具体流程

事件捕获流程.jpg

• 事件捕获：捕获是从上到下
  第一个真正接收的是window（对象）
  第二个接收的是document（对象）
  第三个接收的是html标签（获取html标签document.documentElement）
  第四个接收的是body（document.body）
  剩下的就是按照普通的html结构一层一层往下传
  父级，最后到达目标元素
• 事件冒泡：捕获是从下到上
  第一个接收的是目标元素
  第二个接收的是父级，按照html结构一层一层往上传
  然后接收的是body标签 —> html标签 —> document对象
  最后一个接收的是window对象。

五、Event事件对象

• 在触发DOM上的事件时都会产生一个对象，这个就是事件对象Event
• Event对象常用应用
  event.preventDefaulta()阻止默认事件
  event.stopPropagetion()阻止冒泡
  event.stopImmediatePropagation()当一个元素绑定多个事件处理程序的时候，事件会按照顺序全部执行，如果不想让后面的事件处理程序执行，就在当前事件里加这个方法，后面的事件处理程序就不会执行了。
  event.currentTarget获取绑定事件的元素
  event.target获取触发事件的元素
  event.target.nodeName获取触发事件元素的名字，如 P(大写)
  event.type获取绑定的事件类型，比如click，mouseover等

六、自定义事件

• 所谓自定义事件，就是有别于带有浏览器特定行为的事件（类似click、mouseover、submit、keydown），事件名称可以随意定义，可以通过特定的方法进行添加、触发以及删除。

var eve=new Event('custome') // 自定义事件
var dom=document.getElementById('id')  // 获取DOM元素
dom.addEventListener('custome',function(){})   // 绑定事件
dom.dispatchEvent(eve)  // 触发事件

CustomEvent：也可以自定义事件，还可以自定义参数

七、代码演示

  window.addEventListener('click', function () {
    console.log('window - 绑定事件触发')
  }, false)

  document.addEventListener('click', function () {
    console.log('document - 绑定事件触发')
  }, false)

  document.documentElement.addEventListener('click', function () {
    console.log('html - 绑定事件触发')
  }, false)

  document.body.addEventListener('click', function () {
    console.log('body - 绑定事件触发')
  }, false)

  document.getElementById('wrap').addEventListener('click', function () {
    console.log('父级 wrap - 绑定事件触发')
  }, false)

  document.getElementById('box').addEventListener('click', function () {
    console.log('box - 绑定事件触发')
  }, false)

• 设为false(默认)表示支持冒泡
  依次打印的顺序是: box - wrap - body - html - document - window
• 设为true后表示支持捕获
  依次打印的是相反的：window - document - html - body - wrap - box
• 如果每个元素绑定两个事件，即支持捕获，又支持冒泡，那么捕获后冒泡
  打印的顺序：window - document - html - body - wrap - box - box - wrap - body - html - document - window