1、事件冒泡

1.1 概念

通俗来讲，当触发（点击或者触摸之类的做法）有父元素的子元素的时候，事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件，一直会传到window。如果在某一层想要中止冒泡，使用 event.stopPropagation() 。下面见详细的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #parent {
      width: 400px;
      height: 400px;
      background-color: blue;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #child {
      width: 200px;
      height: 200px;
      background-color: brown;
    }
  </style>

</head>

<body>
  <div id="parent">
    <div id="child"></div>
  </div>

  <script>

    let parent = document.getElementById('parent')
    parent.onclick = function () {
      console.log('parent')
    }

    let child = document.getElementById('child')
    child.onclick = function () {
      console.log('child')
    }

  </script>
</body>

</html>

在这里插入图片描述
我们可以发现，当点击红色区域（子元素）的时候，父级元素的click事件也被触发了。

接下来看两个示例：

1.2 要是不给子元素添加具体的oncilck处理方法，也能冒泡么？

<script>

    // let parent = document.getElementById('parent')
    // parent.onclick = function () {
      // console.log('parent')
    // }

    let child = document.getElementById('child')
    child.onclick = function () {
      console.log('child')
    }

  </script>

效果如下：
在这里插入图片描述
子元素在没有定义具体的click处理函数的时候仍然可以冒泡，触发父级元素的click事件。

1.3 子元素触发的事件冒泡会触发父元素所有的事件么？还是触发对应的事件？

 <script>

    let parent = document.getElementById('parent')
    parent.onkeydown = function () {
      console.log('parent')
    }

    let child = document.getElementById('child')
    child.onclick = function () {
      console.log('child')
    }

  </script>

结果如下：
在这里插入图片描述
我们发现只有相应的事件会发生事件冒泡，不相关的事件不受影响（注意由于click为鼠标的点击，所以同样会触发mousedown与mouseup等相关事件，同时发生冒泡！）

1.4 那么我们应该如何组织这讨厌的事件冒泡机制呢？

很简单，在事件触发时，会传入一个相应的event对象，其中有一个stopPropagation()方法可以阻止事件冒泡（IE中为cancleBubble=true），以下是详细代码：

 <script>
    let parent = document.getElementById('parent')
    parent.onclick = function () {
      console.log('parent')
    }

    let child = document.getElementById('child')
    child.onclick = function (ev) {
      var e = ev || window.event
      // console.log(e)
      console.log('child')
      stopPropagation(e)
    }
    function stopPropagation (e) {
      if (e.stopPropagation) {
        e.stopPropagation()
      } else {
        e.cancelBubble = true
      }
    }
  </script>

结果如下：
在这里插入图片描述
可以通过运行结果来看，事件冒泡成功被阻止了。

看到这里，相信小伙伴们可能会觉得事件冒泡很麻烦，还需要写个事件阻止冒泡行为。但凡事都有双刃剑，事件冒泡同时给我们带来的还有事件委托这一减少DOM操作的神器。

2、事件委托（事件代理）

2.1 概念

事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对，就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托：

2.2 for循环遍历给每个li添加事件

在开发的时候可能会遇到这种情况：如给ul下的每个li都加一个事件，你可能会通过遍历来给每个栏目添加事件：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <ul id="parentUl">
    <li>我是子元素</li>
    <li>我是子元素</li>
    <li>我是子元素</li>
  </ul>

  <script>

    var ul = document.getElementById('parentUl'),
      li = ul.getElementsByTagName('li')
    for (var i = 0; i < li.length; i++) {
      li[i].onclick = function () {
        alert(this.innerHTML)
      }
    }
  </script>
</body>

</html>

在这里插入图片描述
这种方式来添加事件固然简单，但是需要多次操作DOM，如果有100、1000个同级的元素需要添加事件，这种方式就不可取了。

2.3 利用事件代理给li添加事件

事件委托是利用事件的冒泡原理来实现的，比如我们平时在给ul中的li添加事件的时候，我们都是通过for循环一个个添加，如果li很多个的话，其实就有点占内存了，这个时候可以用事件代理来优化性能，

<!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>Document</title>
</head>

<body>
  <ul id='ulid' onclick='clickFunc()'>
    <li>第1个li</li>
    <li>第2个li</li>
    <li>第3个li</li>
    <li>第4个li</li>
    <li>第5个li</li>
  </ul>

  <script>
    function clickFunc (ev) {
      var ev = ev || window.event
      console.log(ev)
      var oLi = ev.srcElement || ev.target
      if (oLi.nodeName.toLowerCase() == 'li') {
        alert(oLi.innerText)
      }

    }

  </script>
</body>

</html>