概念：
什么是事件委托：通俗的講，事件就是onclick乘综，onmouseover憎账，onmouseout，等就是事件卡辰，委托呢胞皱，就是讓別人來做，這個事件本來是加在某些元素上的九妈，然而你卻加到別人身上來做反砌，完成這個事件。
舉個列子：有三個同事預(yù)計會在周一收到快遞萌朱。為簽收快遞宴树，有兩種辦法：一是三個人在公司門口等快遞；二是委托給前臺MM代為簽收【郏現(xiàn)實當(dāng)中酒贬，我們大都采用委托的方案（公司也不會容忍那么多員工站在門口就為了等快遞）。前臺MM收到快遞后翠霍，她會判斷收件人是誰锭吨，然后按照收件人的要求簽收，甚至代為付款寒匙。這種方案還有一個優(yōu)勢零如，那就是即使公司里來了新員工（不管多少），前臺MM也會在收到寄給新員工的快遞后核實并代為簽收锄弱。
原理：
利用冒泡的原理考蕾，把事件加到父級上，觸發(fā)執(zhí)行效果棵癣。
作用：
1.性能要好
2.針對新創(chuàng)建的元素辕翰，直接可以擁有事件（給未來元素加事件）
事件源 :
跟this作用一樣(他不用看指向問題，誰操作的就是誰),event對象下的
使用情景：
?為DOM中的很多元素綁定相同事件狈谊；
?為DOM中尚不存在的元素綁定事件喜命；
JS的事件委托
<body>
<ul id="ul">
<li red="true">1</li>
<li>2</li>
<li red="true">3</li>
<li>4</li>
</ul>
</body>
<script>
var oUl = document.getElementById('ul');
oUl.onclick = function (ev) {
var oEvent = ev || event;
var oSrc = oEvent.srcElement || oEvent.target;
console.log(oSrc.getAttribute('red'));
if (oSrc.getAttribute('red') == 'true'){
oSrc.style.backgroundColor = 'red';
} else {
oSrc.style.backgroundColor = 'green';
}
}
</script>
把每個li點擊一遍結(jié)果如圖：
Jquery的事件委托
<body>
<ul id="ul1">
<li red="true">1</li>
<li>2</li>
<li red="true">3</li>
<li>4</li>
</ul>
<ul id="ul2">
<li red="true">1</li>
<li >2</li>
<li >3</li>
<li red="true">4</li>
</ul>
</body>
<script src="jquery.js"></script>
<script>
$(function(){
$('#ul1,#ul2').on('click','li',function(){
if($(this).attr('red')) {
$(this).css('background','red');
}else {
$(this).css('background','green');
$(this).removeAttr('red');
}
})
});
</script>
結(jié)果如圖：
000.png
