JS的事件委托事件委托就是要把我自己做的事，委托给别人，帮我完成因为我们的冒泡机制，点击子元素的时候，也会同步触发父

* 事件委托

 * 就是要把我自己做的事，委托给别人，帮我完成
 * 因为我们的冒泡机制，点击子元素的时候，也会同步触发父元素的相同事件
     * 所以我们可以把子元素的事件委托给父元素来做
 * 点击子元素的时候，不管子元素有没有点击事件，只要父元素有点击事件，
         那么就可以触发父元素的点击事件
 ul {
  width: 500px;
  background-color: pink;
}
li {
  width: 200px;
  background-color: yellow;
  margin-top: 5px;
}
`<ul> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>`
```js
var oUl = document.querySelector('ul')
oUl.onclick = function () {
    console.log('我是UL的点击事件,我被触发了')
}
```

target

这个属性是事件对象里的属性，表示你点击的目标

这个target兼容性有问题，在IE浏览器内需要使用srcElement

语法:e.srcElement (了解即可)

  var oUl = document.querySelector('ul')
  oUl.onclick = function (e) {
      // console.log(e.target.nodeName)
      if(e.target.nodeName === 'LI') {
          console.log('我是li标签,我被点击了')
      }
  }

事件委托的优点
- 页面上本身没有li,通过代码添加一些li
- 这些li是没有是没有点击事件的，每次动态的添加li，还需要重新给li绑定一次点击事件
- 这时候使用事件委托就比较合适
- 因为:新加进来的li也是ul的子元素，点击的时候也可以触发ul的点击事件

* 事件委托的案例

<!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>
    <style>
    ul {
      width: 500px;
      background-color: pink;
    }
    li {
      width: 200px;
      background-color: yellow;
      margin-top: 5px;
    }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    /**
     * 需求:给ul内部的所有li添加一个点击事件，但是不能使用事件委托
     * */ 
    // 0.获取元素
    var lis = [...document.querySelectorAll('li')]
    var oUl = document.querySelector('ul')

    // 1.遍历数组，给目前结构内所有的li添加一个点击事件
    // lis.forEach(function(item) {
    //   item.onclick = function() {
    //     console.log('我点击了li')
    //   }
    // })
    // 1.利用事件委托解决
    oUl.onclick = function(e) {
      if(e.target.nodeName === 'LI') {
        console.log('我点击了li')
      }
    }

    // 2.创建一个li节点并添加到ul内
    var newLi = document.createElement('li')
    newLi.innerHTML = '我是通过JS创建的li节点'
    oUl.appendChild(newLi)
    </script>
</body>
</html>