JS與Jquery的事件委托


概念:
http://www.jianshu.com/p/e6336ade4e53

  什么是事件委托:通俗的講,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是讓別人來做,這個事件本來是加在某些元素上的,然而你卻加到別人身上來做,完成這個事件。
  舉個列子:有三個同事預計會在周一收到快遞。為簽收快遞,有兩種辦法:一是三個人在公司門口等快遞;二是委托給前台MM代為簽收。現實當中,我們大都采用委托的方案(公司也不會容忍那么多員工站在門口就為了等快遞)。前台MM收到快遞后,她會判斷收件人是誰,然后按照收件人的要求簽收,甚至代為付款。這種方案還有一個優勢,那就是即使公司里來了新員工(不管多少),前台MM也會在收到寄給新員工的快遞后核實並代為簽收。

原理:

  利用冒泡的原理,把事件加到父級上,觸發執行效果。

作用:

1.性能要好
2.針對新創建的元素,直接可以擁有事件(給未來元素加事件)

事件源 :

  跟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點擊一遍結果如圖:


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>

結果如圖:


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com