【JavaScript】事件捕获、事件冒泡与事件委托
2018年12月18日
最近在学习js时，遇到了三个名词：事件捕获、事件冒泡、事件委托。
一、事件捕获和事件冒泡
事件捕获和事件冒泡是为了解决网页中的事件流（事件发生的顺序）而提出的概念。
事件捕获是指事件会从开始发生，直到最具体的元素。
而事件冒泡正好相反，就如同将石子投入水中，波纹是从中心向两边散开。事件冒泡是指事件会从最内层的元素开始发生，一直向外传播。
例：
1 <div id="outer"> 2 <p id="inner">Click me!</p> 3 </div>
对同一个click事件，采取事件捕获的方式，则click事件发生的顺序是document -> html -> body -> div -> p；而采用事件冒泡的方式，click事件发生的顺序则是p -> div -> body -> html -> document。
如果div元素和p元素各有一个函数处理click事件，那么采用事件捕获的方式，会先执行div元素的函数，再执行p元素的函数；事件冒泡则正好相反。
事件冒泡案例：
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <div id="s1">s1 11 <div id="s2">s2</div> 12 </div> 13 <script> 14 <!-- 冒泡的方法，点击s2，s2先响应click事件，其次是s1 --> 15 s1.addEventListener("click", function(e) { 16 console.log("s1 冒泡事件"); 17 }, false); 18 s2.addEventListener("click", function(e) { 19 console.log("s2 冒泡事件"); 20 }, false); 21 </script> 22 </body> 23 24 </html>
事件捕获案例：
1 <!DOCTYPE html> 2 <html lang="en" dir="ltr"> 3 4 <head> 5 <meta charset="utf-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <div id="s1">s1 11 <div id="s2">s2</div> 12 </div> 13 <script> 14 <!-- 捕捉的方法，点击s2，s1先响应click事件，其次是s2 --> 15 s1.addEventListener("click", function(e) { 16 console.log("s1 捕获事件"); 17 }, true); 18 s2.addEventListener("click", function(e) { 19 console.log("s2 捕获事件"); 20 }, true); 21 </script> 22 23 </html>
二、事件委托
事件委托是指将事件绑定在父元素上，然后采用事件冒泡的方法，当事件流达到父元素时，可以通过target获取真正触发的当前元素，并执行绑定在父元素上的方法。
这样做可以省去一个个给子元素绑定事件。
一般的步骤是：
①确定需要监听时间的父元素，我现在一般需要画出DOM树
②给父元素添加addEventListener('event', function)
③通过父元素.target获取实际被操作的元素，在函数中进行处理
通俗点说，就是先找到一个比较高的公共元素节点，给它绑定事件，然后通过event.target知道是哪个子节点触发了事件，找到了触发节点，就可以对它进行操作（删除它，删除它的父节点等）
