一、前言
事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。我们可以用侦听器（或者事件处理程序）来预定事件，这样当监测到事件发生时就能执行响应的代码了。
二、事件
- 事件是JS引擎内置的、预先定义的函数变量
- 事件有可能由浏览器触发，也可能由用户触发
- 当事件触发时，JS引擎会按照一定的规则调用这些变量中的函数
- 事件可编程
三、事件绑定
1. 第一种
onType = function(e) { // more codes }
特点：浏览器兼容性好
缺点：过于老旧，只能绑定一个函数，等同于写在DOM上的attribute
注意：Type代表事件类型
2. 第二种
eventTarget.addEventListener(Type, function() { // more codes }, true/false);
特点：可以绑定多个函数，同一个函数只能绑定一次
缺点：IE9及以下不支持
注意：事件监听函数的第三个参数，如果是true代表在捕获阶段调用该事件处理程序，false代表在冒泡阶段调用事件处理程序。
3. 第三种
element.attachEvent(onType, function() { // more codes });
优点：可以绑定多个函数，同一函数可以绑定多次
缺点：只有IE支持此标准
四、事件解绑
分别对应以上三种绑定方式的解绑方法：
- onType = null;
- eventTarget.removeEventListener(Type, function() {...}, true/false);
- element.detachEvent(onType, function() {...});
五、事件流
段：
- 捕获阶段：事件从Document节点自上而下向目标节点传播的阶段（1-4）
- 目标阶段：真正的目标节点正在处理事件的阶段（4-6）
- 冒泡阶段：事件从目标节点自上而下向Document节点传播的阶段（6-10）
注意：DOM事件的触发顺序是：首先事件捕获，然后是事件处理执行，最后是事件冒泡。
六、取消冒泡事件
1. 方式
- W3C：event.stopPropagation();
- IE&Chrome: e.cancelBubble = true;
2. 案例
1. 事件绑定，返回事件源
这里默认为false，在冒泡阶段执行事件处理程序。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>js事件流</title> <style> #outer { border: 2px solid red; padding: 20px; } #box { border: 2px solid green; padding: 20px; } #myDiv { border: 1px solid #000; text-align: center; width: 100%; height: 100%; } </style> </head> <body> <div id="outer">outer <div id="box">box <div id="myDiv">myDiv</div> </div> </div> <script> var outer = document.getElementById('outer'); var box = document.getElementById('box'); var myDiv = document.getElementById('myDiv'); outer.addEventListener('click', function(e) { console.log('1. outer 冒泡'); e = e || window.event; // 后一种为兼容IE的写法 var target = e.target || e.srcElement; console.log(target); // 返回目标元素（事件源） }, false); box.addEventListener('click',function(e) { console.log('2. box 冒泡'); e = e || window.event; var target = e.target || e.srcElement; // 后一种为兼容IE的写法 console.log(target); }, false); myDiv.addEventListener('click', function(e) { console.log('3. myDiv 冒泡'); e = e || window.event; var target = e.target || e.srcElement; console.log(target); }, false); </script> </body> </html>
1.1 点击myDiv区域
解析：冒泡顺序：myDiv => box => outer => document => window；事件源为myDiv。
1.2 点击box区域
解析：冒泡顺序：box => outer => document => window；事件源为box。
1.3 点击outer区域
解析：冒泡顺序：outer => document => window；事件源为outer。
