一、事件
事件是用户或浏览器自身执行的某种动作，如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之间的桥梁。
你若触发，我便执行——事件发生，调用它的处理函数执行相应的JavaScript代码给出响应。
典型的例子有：页面加载完毕触发load事件；用户单击元素，触发click事件。
二、事件流
1、事件流感性认识
问题：单击页面元素，什么样的元素能感应到这样一个事件？
答案：单击元素的同时，也单击了元素的容器元素，甚至整个页面。
例子：有三个同心圆， 给每个圆添加对应的事件处理函数，弹出对应的文字。单击最里面的圆，同时也单击了外面的圆，所以外面圆的click事件也会被触发。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> #outer{ position: absolute; width: 400px; height: 400px; top:0; left: 0; bottom:0; right: 0; margin: auto; background-color: deeppink; } #middle{ position: absolute; width: 300px; height:300px; top:50%; left: 50%; margin-left: -150px; margin-top: -150px; background-color: deepskyblue; } #inner{ position: absolute; width: 100px; height:100px; top:50%; left:50%; margin-left: -50px; margin-top: -50px;; background-color: darkgreen; text-align: center; line-height: 100px; color:white; } #outer,#middle,#inner{ border-radius:100%; } </style> <body> <div id="outer"> <div id="middle"> <div id="inner"> click me! </div> </div> </div> <script> var innerCircle= document.getElementById("inner"); innerCircle.onclick= function () { alert("innerCircle"); }; var middleCircle= document.getElementById("middle"); middleCircle.onclick=function(){ alert("middleCircle"); } var outerCircle= document.getElementById("outer"); outerCircle.onclick= function () { alert("outerCircle"); } </script> </body> </html>
2、事件流
事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。
事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流。
冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。
捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div id="myDiv">Click me!</div> </body> </html>
上面这段html代码中，单击了页面中的<div>元素，
在冒泡型事件流中click事件传播顺序为<div> —> <body>—> <html>—> document
在捕获型事件流中click事件传播顺序为document —> <html> —><body> —> <div>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> #outer { position: absolute; width: 400px; height: 400px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: deeppink; } #middle { position: absolute; width: 300px; height: 300px; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; background-color: deepskyblue; } #inner { position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; ; background-color: darkgreen; text-align: center; line-height: 100px; color: white; } #outer, #middle, #inner { border-radius: 100%; } </style> <body> <div id="outer"> <div id="middle"> <div id="inner"> click me! </div> </div> </div> <script> //true - 事件句柄在捕获阶段执行 //false- 事件句柄在冒泡阶段执行(默认) var innerCircle = document.getElementById("inner"); innerCircle.addEventListener("click", function() { alert("innerCircle的click事件在捕获阶段被触发"); }, true); innerCircle.addEventListener("click", function() { alert("innerCircle的click事件在冒泡阶段被触发"); }, false); var middleCircle = document.getElementById("middle"); middleCircle.addEventListener("click", function() { alert("middleCircle的click事件在捕获阶段被触发"); }, true); middleCircle.addEventListener("click", function() { alert("middleCircle的click事件在冒泡阶段被触发"); }, false); var outerCircle = document.getElementById("outer"); outerCircle.addEventListener("click", function() { alert("outerCircle的click事件在捕获阶段被触发"); }, true); outerCircle.addEventListener("click", function() { alert("outerCircle的click事件在冒泡阶段被触发"); }, false); </script> </body> </html>
3、事件流的典型应用——事件代理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <body> <ul id="color-list"> <li>red</li> <li>orange</li> <li>yellow</li> <li>green</li> <li>blue</li> <li>indigo</li> <li>purple</li> </ul> <script> (function() { var colorList = document.getElementById("color-list"); colorList.addEventListener('click', showColor, false); function showColor(e) { e = e || window.event; var targetElement = e.target || e.srcElement; console.log(targetElement.nodeName.toLowerCase()); if (targetElement.nodeName.toLowerCase() === "li") { alert(targetElement.innerHTML); } } })(); </script> </body> </body> </html>
a、将多个事件处理器减少到一个，因为事件处理器要驻留内存，这样就提高了性能。想象如果有一个100行的表格，对比传统的为每个单元格绑定事件处理器的方式和事件代理（即table上添加一个事件处理器），不难得出结论，事件代理确实避免了一些潜在的风险，提高了性能。
b、DOM更新无需重新绑定事件处理器，因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素（a,span,div等），直接修改事件代理的事件处理函数即可，不需要重新绑定处理器，不需要再次循环遍历。