使用原生JS实现事件委托

什么是事件

事件（event），定义为：比较重大,对一定的人群会产生一定影响的事情。对于前端开发来说，事件就是在浏览器中触发动作的能力，比如在点击某个元素时启动JS。

事件绑定

点我
   ```

以上代码对button元素通过JS绑定了一个点击事件，当点击按钮后，浏览器控制台就会显示guagua，这种方法叫做事件绑定，但是如果要对该事件添加多个事件处理函数，此方法不适用，因为事件绑定只能添加一个，如果添加多个，后面的会覆盖前面的。

##事件监听

点我
```
以上代码是通过addEventListener()监听了一个点击事件，addEventListener()解决了事件覆盖的情况，addEventListener()接受三个参数分别是事件类型，函数，布尔值，如果布尔值是true那么就是捕获，如果是false则是冒泡。因此可见addEventListener还可以控制事件的触发方式。

事件委托

为什么要用事件委托

1、如果对每个元素都监听，就会产生很多监听器，监听器是占内存的。

2、打个比方，如果有1000个Li，那岂不是要写1000个监听器？当然不能这样搞，所以就需要用到时间委托了。

例子1
代码

  
  


 

        
a
        
b
        
c
        
d
        
e
    

以上代码就是最简单的事件委托方法，通过监听父元素，再通过条件语句判断点击的元素是什么，那么问题就来了，如果在一个Li里面加上一个span呢？答案是点击的时候事件委托会失效，这时候只需要略微修改一下条件语句即可
代码

var a = document.getElementById('haha')
haha.addEventListener('click',function (e){
if(e.target.tagName === 'LI'||
   e.target.parentNode.tagName === 'LI'){
console.log('ok！')
}
})
//注意tagName是大写

这样会在点击的元素往上查找，复合条件语句判断的时候就触发事件。

例子2

  
  


  

  
我是p
  
我是h1

  

代码
以上代码的需求为点击h1或h1的子元素时返回h1！，如果点击其他元素的时候返回error。
在以上代码中我们首先监听div，然后通过while循环内的条件语句来判断点击的是不是h1元素，如是就返回返回h1！，如果不是的话就继续往上找父元素，直到找到div为止。