事件委托 ： 将某个事件委托给另一个元素( 委托给父级元素 这里的父级可以是直接父元素 也可以是爷爷 曾爷爷... )
事件委托好处：
1、为某些元素的父级元素添加事件，提高程序的执行效率
2、动态创建的元素 添加事件时，可以将事件添加在动态创建的函数体外面
委托实现 ：
父级元素.onclick = function(){ ... }
父级元素.addEventListener("事件",function(){ ... })
获取事件源兼容：
target = e.target || e.srcElement;
不是所有的事件都可以实现委托，不能实现冒泡的事件就不能实现委托
委托实现机制 ：
利用事件冒泡或捕获机制
不是所有的事件都能够实现事件委托 onload onfocus onblur
委托实现方式:
第一种 ： 父级元素.事件 = function（）{}
第二种 ： 父级元素.addEventListener("",function(){ })
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<ul>
<li>孩子多个1</li>
<li>孩子多个2</li>
<li>孩子多个3</li>
<li>孩子多个4</li>
<li>孩子多个5</li>
<li>孩子多个6</li>
<li>孩子多个7</li>
<li>孩子多个8</li>
<li>孩子多个9</li>
<li>孩子多个10</li>
<li>孩子多个11</li>
<li>孩子多个12</li>
<li>孩子多个13</li>
<li>孩子多个14</li>
<li>孩子多个15</li>
<li>孩子多个16</li>
<li>孩子多个17</li>
<li>孩子多个18</li>
<li>孩子多个19</li>
<li>孩子多个20</li>
<p>孩子多个20</p>
</ul>
</div>
</body>
</html>
<script>
//事件委托 ： 将事件委托给其他元素
//当为多个同类的元素添加相同事件时 可以将事件添加到这些元素的父级元素上
//为所有的li添加单击事件(事件源是li)
var oUl = document.querySelector("ul");
oUl.onclick = function(e){
var e = e || event;
//重新获取事件源
var target = e.target || e.srcElement;
//alert( target.tagName );
if( target.tagName.toLowerCase() == "li" ){
target.style.backgroundColor = "pink";
}
}
/*oUl.addEventListener( "click" , function(e){
var e = e || event;
//重新获取事件源
var target = e.target || e.srcElement;
alert( target.tagName );
},false )*/
</script>