事件委託的原理：就是利用事件冒泡，把事件添加到父級上，在觸發執行效果。
事件委託有兩個好處：
1、可以大大的提高頁面性能。
2、動態添加的元素，還會有之前的事件。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委託</title>
<script type="text/javascript">
window.onload = function() {
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;
//在鼠標滑過的事件，要做下判斷，當滑過的是li的時候，才修改背景顏色，滑過的是ul的時候，不執行(使用nodeName進行標籤名的判斷)
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = 'red';
}
}
oUl.onmouseout = function(ev) {
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if (target.nodeName.toLowerCase() == 'li') {
target.style.background = '';
}
}
oInput.onclick = function () {
iNow++;
var oLi = document.createElement('li');
oLi.innerHTML = 111*iNow;
oUl.appendChild(oLi);
}
}
</script>
</head>
<body>
<input type="button" value="添加" id="input1" />
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
</html>
注意：在這裏面會涉及到事件源，在event對象下，事件源就是不管在哪個事件中，只要你操作的那個元素就是事件源。
以下是事件源的兼容寫法：
IE：window.event.srcElement 標準下：event.target。