聊一聊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' 事件委託寫法
$(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'