js 事件流和事件处理程序（DOM 标准事件模型）

一、基本概念

1. 事件：文档或浏览器窗口中发生特定交互瞬间

2. 事件流：描述从浏览器中接收事件的顺序

（1） IE的事件流：事件冒泡流
（2）Netscape Communicator 的事件流：事件捕获流

3. 事件冒泡：从触发事件的最具体元素开始，逐级向上传播到 document 对象

• 阻止事件冒泡的方式：

（1）event.stopPropagation()
（2）低版本IE取消冒泡：event.cancelBubble()
（3）return false

• 注：第三种阻止方式，在取消事件冒泡事件的同时，也阻止了浏览器默认事件
• 注：不是所有事件都支持冒泡事件；比如：
  鼠标事件（ mouserleave, mouseenter 等 ），
  焦点事件（ blur, focus 等 ），
  UI 事件（ load, unload, abort, error, scroll, resize 等 ）

注意：
①所有现代浏览器都支持事件冒泡，但在具体实现中略有差别。IE5.5 及更早版本中事件冒泡会跳过元素(从 body 直接跳到 document )。IE9、Firefox、Chrome、和 Safari 则将事件一直冒泡到 window 对象。
②IE9、Firefox、Chrome、Opera、和 Safari 都支持事件捕获。尽管 DOM 标准要求事件应该从 document 对象开始传播，但这些浏览器都是从 window 对象开始捕获事件的。
③由于老版本浏览器不支持，很少有人使用事件捕获。建议使用事件冒泡。有特殊情况再使用捕获。

补充：浏览器默认行为

（1）JavaScript 事件本身所具有的属性

• a 标签的跳转；导航（二级导航）
• submit 按钮的提交
• 右键菜单（web 应用程序里，在线 Word）
• 文本框的输入等

（2）阻止默认行为的方式：

• w3c 的方法是： event.preventDefault()
• 低版本 IE： window.event.returnValue = false; return false;

4. 事件捕获：从document 对象开始，事件沿 DOM 树逐级向下传播到具体目标

其用意：在事件到达预订目标事件之前捕获它

5. DOM 事件流

• 包括三个阶段：事件捕获阶段 => 处于目标阶段（事件源 target）=> 事件冒泡阶段。

• 在所有的现代浏览器当中——除了 IE9 之前的版本——都实现了 DOM2 标准事件模型，这个事件模型规定:每一个 DOM 元素所触发的事件都要经历三个阶段：①捕获阶段；②目标对象本身的事件处理程序调用阶段；③冒泡阶段。

  
  
  

（1）捕获阶段：先由文档的根节点 document 往事件触发对象，从外向内捕获事件对象；
（2）目标阶段：到达目标事件位置（事发地），触发事件；
（3）冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。
先由外向内事件捕获，一直到事发元素，在由内向外冒泡到根节点上。
注:（1）event.target 取到触发事件的源头；（2） event.currentTarget 取到当前绑定事件的元素；

6. 事件处理程序：即响应某个事件的函数

二、 四种绑定事件方法

1. HTML 事件处理程序：即直接在 html 标签上绑定以 "on" 开头的事件

缺点：

• 存在时差问题：有可能要调用的函数还没有加载完，用户就触发事件，从而导致错误
• js 与 html 代码紧密耦合：修改代码时很麻烦

2. DOM0 级事件处理程序：取得要操作的对象的引用，直接绑定 on 事件

obj.onclick = function() {
    // 处理内容
}

注：删除事件直接将处理事件的值设置为 null；例如 obj.οnclick = null

3. DOM2 事件处理程序：使用 addEventListener() 进行事件监听

• addEventListener 用法：
  （1）语法：target.addEventListener( type , listener , useCapture )
  （2）addEventListener 第三个参数：
• 该方法接受的参数：要处理的事件名(不带 on 开头)、作为事件处理程序的函数和一个布尔值
• 布尔值表示：
  （1） true: 表示在事件捕获阶段( Capture )调用事件处理程序；
  （2）默认为 false: 表示在事件冒泡阶段( bubbing )调用事件处理程序；--建议使用！

const obj = document.getElementById("box")
obj.addEventListener("click", function() {
    // 处理内容
}, false);

补充：普通绑定事件和用 addEventListener 添加事件有什么区别？

（1）.onclick 添加事件不能绑定多个事件，后面绑定的会覆盖前面的

box.onclick = function() {
  alert(1)
}
// 只会执行最后一个 onclick
box.onclick = function() {
  alert(2)
}

（2）. addEventListener 能添加多个事件绑定，按顺序执行

• 普通方式绑定事件后，不可以取消。addEventListener 绑定后则可以用removeEvenListener 取消（注：匿名函数无法移除）

// 按顺序执行
box.addEventListener('click', function timer1() {
  alert(1)
}, false)
box.addEventListener('click', function timer2() {
  alert(2)
}, false)

（3）.addEventListener 方式，不支持低版本的 IE。（attachEvent 支持IE）

4.IE 事件处理程序：

• attachEvent() 添加、detachEvent() 移除
• 参数：事件处理程序名称（带 on 开头）和事件处理程序函数

obj.attachEvent("onclick",  function() {
    // 处理内容
});

• 与DOM0 级方法的区别：this 的作用域不一样
• 在DOM0 中：事件处理程序会在其所属元素的作用域内运行
• 在 attachEvent() 方法内：事件处理程序在全局作用域运行，this 等于 window
• 当绑定多个事件时，事件触发顺序从下往上执行

总结：跨浏览器的事件处理程序，为保证处理事件的代码在不同浏览器下一致执行，只需关注冒泡阶段，可通过封装一个对象，进行方法调用。