聊一聊JQ中delegate事件委託的好處
阿新 • • 發佈:2019-02-16
下面舉個例子
我們希望通過點選使得點選的li標籤變紅
HTML
<body style="height:2000px;">
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</body>
普通寫法
$(function(){
$('li').on('click',function(){
$(this).css('background' ,'red');
});
});
事件委託寫法
$(function(){
$('ul').delegate('li','click',function(ev){
$(this).css('background','red');
});
});
我們發現以上兩種方法都可以使所點選的li標籤變紅,效果上沒有區別,
但是普通寫法on是將事件加到li標籤上面,
而事件委託delegate寫法事件並沒有加到li上面,而是加到了ul的上面,是$(this)觸發的時候指向了li;利用了冒泡原理。
事件委託的好處:
1、原本需要給多個元素新增,現在只需要給一個元素新增,效能上比較好些。
2、對後續建立生成的元素可以直接操作,而on事件不可用。
例如:
當點選按鈕的時候,想ul裡面建立一個li標籤
<body style="height:2000px;">
<input id="input1" type="button" value="新增">
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</body>
$(function(){
$('li').on('click' ,function(){
$(this).css('background','red');
});//對於新建立新增的li標籤點選無變化
$('ul').delegate('li','click',function(ev){
$(this).css('background','red');
//$(ev.delegateTarget).css('background','red'); //委託物件ul
$(ev.delegateTarget).undelegate();//取消委託
});//新建立新增的li標籤也可以變紅
//原因在於事件原本就不在li上面,新建立的和原本有的沒有區別,真正的事件是在ul身上,只要ul不變,ul裡面元素的事件都是可以觸發的
$('#input1').click(function(){
var $li = $('<li>hello</li>');//建立li標籤
$('ul').append( $li );
});
});