总结：当嵌套中，既有事件捕获又有事件冒泡的情况下，先从最上面开始找，到被真正点击的元素，这个区域中，把所有的事件捕获全部执行完，在去从被点击的元素开始执行冒泡（定律）
(1)、都是 事件触发时序问题 的术语。
(2)、绑定事件方法（addEventListener）的第三个参数是控制事件触发顺序的，默认为false，即事件冒泡；若为true,即事件捕获。
image.png

事件冒泡

image.png
image.png
image.png

事件冒泡的含义（从下到上，从当前元素开始到嵌套的根元素结束）

从最开始触发的元素，开始往上冒泡，同时上面的元素只有有相同的事件才会执行（会被冒泡）没有相同的事件不会被冒泡（同时往上找的只是嵌套它的元素，不是嵌套它的元素，有相同的事件也不会执行，只要是嵌套触发元素的上级元素都会被冒泡，就算中间隔着一个没有相同事件的元素，也没事，上面的有相同事件的也会被触发）

事件捕获

image.png

事件捕获（从上到下到当前元素结束）

是从当前触发事件元素开始往下找，（也指的是嵌套的元素，如上图，你点击的是button，但是也是从嵌套button元素的根元素开始往下找，中途只要有和button相同的事件，就都会被触发，直到触发了button的事件就停止往下了）
image.png
image.png

事件委托的实现原理

事件委托的原理就是冒泡，当你点击一个li，虽然这个li没有绑定点击事件，但是它的父元素绑定了点击事件给li的父元素绑定点击事件的时候，回调函数中有一个参数，这个参数就是被点击的当前事件源，也就是那个被点击的li，我们利用e.target就可以获取到当前的事件源，也就是被点击的那个li，进而操作那个li
image.png

image.png
在原生JS中动态添加的元素，是不能绑定事件的，vue中动态添加的元素，是可以绑定事件的

嵌套的关系，点击里面的，外面的也就相当于被点击了

事件委托的实例及特殊情况的解决方案

  1. <body>
  2.     <ul id="list">
  3.       <div>001</div>
  4.       <span>002</span>
  5.       <li>1</li>
  6.       <li>2</li>
  7.       <li>3</li>
  8.     </ul>
  9.   </body>
  10.   <script>
  11.     //事件委托
  12.     // 当我们想给一个ul，里面的所有li都注册点击事件，但是li太多的情况下
  13.     // 我们可以给这些li的直接父元素注册一个点击事件就可以了，事件委托的原理
  14.     // 就是事件冒泡
  15.     let list = document.getElementById("list");
  16.     list.addEventListener("click", function (e) {
  17.       let currentTarget = e.target; //代表事件源比如说li
  18.       //这里加判断是因为我们给整个li的父元素注册了点击事件
  19.       //   就代表，里面的每个元素都可以触发点击事件，特殊情况如果
  20.       //   整个父元素中比如说还有除li之外的其他元素，这种情况我们就
  21.       //   需要判断是li元素才触发事件，不是li元素，就触发不了事件
  22.       //   如果父元素中都是li元素一种元素的话，就不需要就判断了
  23.       if (currentTarget.tagName.toLowerCase() === "li") {
  24.         alert(11111);
  25.       }
  26.     });
  27.   </script>

image.png
也就是说在原生JS中如果我们又动态添加的元素也想要给这个动态添加的元素也注册事件的话，只能通过事件委托来注册事件了（vue中不需要考虑这一点）

原始方法 利用for循环给每个目标元素设定事件

image.png

给window上绑定一个捕获的事件，阻止默认行为就行
image.png