什么是事件委托?为什么要用事件委托?

事件委托机制又叫事件代理.我们给dom绑定一个事件往往很简单

element.addEventListener('eventType',function(){
  //事件发生后的js操作
})

可是如果给一个不存在的dom元素绑定事件呢?例如有一个ul,下面有很多li,这些li是通过服务器动态获取的,具体有多少个是不确定的,那如何动态的给这些li绑定事件呢?

addEventListener()的应用

当我们给一个事件添加点击事件的时候自然用到的addEventListener()有三个参数
第一个是字符串,表示触发事件,比如'click'.
第二个是处理函数
第三个是个布尔值,默认为false,代表事件冒泡,true代表事件捕获.说一下自己的理解,举个例子,如果有个妹子和我牵手,那么我可以说她触碰到我的手了,也可说触碰到我的肢体了,也可以说触碰到我的身体了.这是个逐级放大的过程.那dom中也是如此,当你触发一个节点的事件,那么其实从某种角度来说你也触发了该节点的父节点的事件.逐级向父节点触发事件的过程就像冒泡泡一样一点一点上升扩大,就是事件冒泡.反向冒泡就是事件捕获.

e.target

那回到我们这个问题,如果想给暂时不存在的dom节点添加事件该怎么办呢?好在addEventListener()有一个参数,就是event(通常简写做e),e对象有一个属性就是e.target,代表被触发的元素(包括该元素及其子元素),然后

e.target.getElementsByTagName('li')

通过这行代码就会获得所有标签为li的子元素,下面的代码可以在控制台输出被点击的节点

<body>
  <div id="div1">i'm div1
    <li>i am li 1</li>
    <li>i am li 2</li>
  </div>
  <script>
    window.onload = function () {
      let div = document.getElementById('div1')
      div.addEventListener('click', function (e) {
       if(e.target.nodeName === 'LI'){
         console.log(e.target)
       }
      })
      let li = document.createElement('li')
      li.innerHTML = 'i am li 3'
      div.appendChild(li)
    }
  </script>
</body>