事件委託（事件代理）：利用冒泡的原理，把事件添加到父級甚至祖先級上，觸發執行。
事件代理的好處：
1.提高性能；
2.動態添加的元素依然有之前的事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" id="input1" value="點擊添加" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<script type="text/javascript">
var oUl=document.getElementById("ul1");
var aLi=oUl.getElementsByTagName('li');
var oInput=document.getElementById("input1");
var iNow=4;
oUl.onmouseover=function(ev){
var ev = ev || window.event; //處理兼容性
var target= ev.target || ev.srcElement; //處理兼容性，找到事件源
if (target.nodeName.toLowerCase()=='li') { //只爲li節點添加事件
target.style.backgroundColor='yellow';
}
}
oUl.onmouseout=function(ev){
var ev = ev || window.event;
var target= ev.target || ev.srcElement;
if (target.nodeName.toLowerCase()=='li') {
target.style.backgroundColor='';
}
}
oInput.onclick=function(){ //動態添加元素，動態添加的元素依然有onmouseover和onmouseout事件。
iNow++;
var oLi=document.createElement('li');
oLi.innerHTML=111*iNow;
oUl.appendChild(oLi);
}
</script>
</body>
</html>