关于事件委托的冒泡原理

事件冒泡，就是元素自身的事件被触发后，如果父元素有相同的事件，如onclick事件，那么
元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套
关系向外触发，直到document/window，冒泡过程结束。

事件委托利用冒泡原理不就是不想在每个子元素上设置事件吗？为什么这里解释说元素自身还会有事件？

元素自身肯定是有事件的

如 parent 以及很多children

我现在给parent绑定了一个事件 children在parent当中那你觉得点击children会不会触发事件呢？肯定时会触发的，那么这个时候这个自身事件其实也就是children这个的事件通过children的点击事件，触发到了parent的点击事件

也就是绑定父元素，点子元素->触发父元素这么个逻辑

那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，我仔细揣摩了一下，这个例子还真是恰当，我就不去想别的例子来解释了，借花献佛，我摘过来，大家认真领会一下事件委托到底是一个什么原理：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

原文链接：https://blog.csdn.net/sinat_26422099/article/details/78407972

首先要知道事件委托不是为了阻止冒泡，而是利用了冒泡。
比如一个ul元素有很多li，你不希望在所有li上都加上事件，然后你知道了有一个知识叫做冒泡，你灵机一动，哦~反正所有li的点击事件都会冒泡去ul，那我就只给ul添加事件不就好了，然后在ul点击时去判断是哪个li就好了嘛。
这就是事件委托。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul onclick="btn(event)">
    <li onclick="child(event)">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>

<script>
  function btn(e) {
    console.log('我是父组件绑定的事件哦');
    console.log('我是实际点击的元素哦',e.target);
    console.log('我是当前事件绑定的那个元素哦',e.currentTarget);
  }
  function child(e) {
    console.log('我是第一个子元素li哦');
    console.log('我是实际点击的元素哦',e.target);
    console.log('我是当前事件绑定的那个元素哦',e.currentTarget);
  }
</script>
</html>

事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。
如代码中一个父元素ul，里面有许多子元素li，当你点击某一个子元素li时，他会先后经历这三个阶段，
先开始事件捕获阶段，即document->html->body->ul->>>>>目标阶段li->>>>>事件冒泡阶段->ul->body->html->document结束，
目标阶段li->>>>>事件冒泡阶段->ul->body->html->document依次触发绑定的事件
如代码，点击第一个li时会出现以下结果

e.target是真实点击的那个元素
e.currentTarget为当前事件所绑定的那个元素
事件委托时，只需要将事件绑定到父元素上，子元素不绑定事件，在点击子元素时依旧会触发父元素的事件，这时，你只需要知道你实际点击的元素e.target是谁即可，以此实现事件委托。
你也可以看成绑定的事件是一样的，但是实际触发这一事件的元素e.target是不一样的