事件委托

面试遇到这个问题，发现还是不能准确的回答出来，故重新记录一下，加深理解

先来弄懂两个概念：（不考虑ie低版本）

• 事件捕获：事件首先发生在DOM树的最高层对象(document)然后往最深层的元素传播
• 事件冒泡：事件促发的最深层元素首先接收事件。然后是它的父元素，依次向上，直到document对象最终接收到事件。

addEventListener 的第三个参数 就代表着这两种事件之一。

现在来谈一下事件委托：

JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象：

有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。

我认为事件委托是利用冒泡原理，把事件的监听转换到其父元素上，也就是把事件绑定到父元素上，然后在事件中获取子元素对象，对其进行相应的操作。优点：1.提高性能2.减少代码量

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

实现功能是点击li，弹出123：

window.onload = function(){
		　　var oUl = document.getElementById("ul1");
		　　oUl.onclick = function(ev){
			　　　　var ev = ev || window.event;
			　　　　var target = ev.target || ev.srcElement;  // 兼容IE
			　　　　if(target.nodeName.toLowerCase() == 'li'){
				　 　　　　　　	alert(123);
				　　　　　　　  alert(target.innerHTML);
			　　　　}
		　　}
	}

但是如果场景是这样的呢

   <ul id="test">
        <li>
            <p>11111111111</p>
        </li>
        <li>
            <div>
                22222222
            </div>
        </li>
        <li>
            <span>3333333333</span>
        </li>
        <li>4444444</li>
    </ul>

　var oUl = document.getElementById('test');
    oUl.addEventListener('click',function(ev){
        var target = ev.target;
        while(target !== oUl ){
            if(target.tagName.toLowerCase() == 'li'){
                console.log('li click~');
                break;
            }
            target = target.parentNode;
        }
    })

参考：点击链接