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" 开头的事件
<div id = "div" onclick = "function() {}"></div>
缺点：
- 存在时差问题：有可能要调用的函数还没有加载完，用户就触发事件，从而导致错误
- 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
- 当绑定多个事件时，事件触发顺序从下往上执行
总结：跨浏览器的事件处理程序，为保证处理事件的代码在不同浏览器下一致执行，只需关注冒泡阶段，可通过封装一个对象，进行方法调用。
