JavaScript 事件委托

基本概念
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown…）的函数委托到另一个元素；
一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。下面举个小例子看看事件委托是怎么做的

<ul>
        <li>我是渣渣辉1</li>
        <li>我是渣渣辉2</li>
        <li>我是渣渣辉3</li>
        <li>我是渣渣辉4</li>
        <li>我是渣渣辉5</li>
    </ul>

我们点击li让他本行的li添加背景颜色，这时候事件委托就可以登场啦
我们可以用e.target来获取当前点击的li元素，直接给他设置背景颜色

var ul = document.querySelector("ul")
	//addEventListener() 方法用于向指定元素添加事件句柄。
    ul.addEventListener("click", function (e) {
    	 // 兼容性处理
  		var event = e || window.event;
  		var target = event.target || event.srcElement;
        event.target.style.background = "red"
    })

加油把骚年