JQuery7:事件委託

尹成發表於2018-11-14

#事件委託
事件委託就是利用冒泡的原理,把事件加到父級上,通過判斷事件來源的子集,執行相應的操作,事件委託首先可以極大減少事件繫結次數,提高效能;其次可以讓新加入的子元素也可以擁有相同的操作。

###一般繫結事件的寫法

$(function(){
    $ali = $('#list li');
    $ali.click(function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

###事件委託的寫法

$(function(){
    $list = $('#list');
    $list.delegate('li', 'click', function(event) {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

###取消事件委託

// ev.delegateTarge 委託物件
$(ev.delegateTarge).undelegate();

// 上面的例子可使用 $list.undelegate();

學院Go語言視訊主頁
https://edu.csdn.net/lecturer/1928

清華團隊帶你實戰區塊鏈開發
掃碼獲取海量視訊及原始碼 QQ群:721929980
在這裡插入圖片描述

相關文章