jQuery事件委托為未添加的元素綁定事件

GitCafe 發布于2019-08-21 11:26 / 2520人閱讀

摘要：在說事件委托之前先介紹一下事件冒泡。什么是事件委托事件委托就是講事件監聽器加在所要綁定元素的父元素上，為避免給每個特定的節點增加事件監聽，避免在特定節點被刪除時還要再刪除它的綁定事件。

在說事件委托之前,先介紹一下事件冒泡。

什么是javascript事件冒泡？

根據紅寶書，事件開始是由最具體的元素接受，然后逐級傳播到較為不具體的節點
例如：




    
    Document

如果單擊了div,則click事件會按照如下順序傳播
(1)div
(2)body
(3)html
(4)document

因為事件冒泡的原理，我們就可以將事件綁定在不具體的父元素上，點擊具體的子元素，觸發其父元素的事件，這就是事件委托。

什么是javascript事件委托？

事件委托就是講事件監聽器加在所要綁定元素的父元素上，為避免給每個特定的節點增加事件監聽，避免在特定節點被刪除時還要再刪除它的綁定事件。
例子：


    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6

// 找到父元素，添加監聽器...
document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target是被點擊的元素!
    // 如果被點擊的是li元素
    if(e.target && e.target.nodeName == "LI") {
        // do something
    }
});

然后，再介紹jQuery事件委托。

jQuery事件委托

這是我在調用bootstrap框架時要使用bootstrap的日歷控件

發現如果是動態添加的元素，無法為新添加的元素增加事件，所以是無效的，所以我們應該將點擊生成日歷控件這個方法綁定在它的父元素上，使用jQuery中的on方法

$(selector).on(event,childSelector,data,function,map)，

具體實現：

$parent.on("focus",".datetimepicker",function(){
        $(this).datetimepicker({
            language:  "fr",
            format:"yyyy-mm-dd",
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0
        });
});
還有一個方法是live(),不過在jQuery1.7中已被廢棄，由on()取代，就不提啦。

云服務器 GPU云服務器 jquery預綁定事件 jquery綁定hover事件 jquery綁定事件on 委托事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86703.html

jQuery源碼解析之你并不真的懂事件委托及target和currenttarget的區別

摘要：源碼源碼行被點擊了點擊了，即委托的事件被點擊了優先添加委托，再添加其他即委托在上的事件數量在下標為的位置插入委托事件解析可以看到，是優先添加委托事件，再添加自身事件，觸發事件的時候也是按這個順序。 showImg(https://segmentfault.com/img/remote/1460000019419722); 前言：請先回顧下我之前寫的一篇文章：JavaScript之事件委...

khs1994 2019-08-23 18:01 評論0 收藏0
jQuery之事件綁定到觸發全過程及知識點補充

摘要：十的觸發機制被點擊了元素本身綁定了一個事件，但是是原生事件，它是靠綁定來觸發事件的。 showImg(https://segmentfault.com/img/remote/1460000019505402); 前言：最重要的還是最后的流程圖，可以試著根據流程圖手寫實現$().on()，下篇文章會放出模擬實現的代碼。一、舉例這是A 這是C ...

Jioby 2019-08-23 18:10 評論0 收藏0
JavaScript事件委托原理

摘要：概念事件委托，通俗來說就是將元素的事件委托給它的父級或者更外級元素處理。級事件規定的事件流包括三個階段事件捕獲目標階段事件冒泡原理事件委托就是利用事件冒泡機制實現的。最適合采用事件委托技術的事件包括和。概念事件委托，通俗來說就是將元素的事件委托給它的父級或者更外級元素處理。事件流事件流描述的是從頁面中接收事件的順序。事件冒泡：事件開始由最具體的元素接收，然后逐級向上傳播到較為...

lscho 2019-08-21 17:56 評論0 收藏0