成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

GitCafe / 2590人閱讀

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

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

什么是javascript事件冒泡？

根據(jù)紅寶書，事件開始是由最具體的元素接受，然后逐級傳播到較為不具體的節(jié)點(diǎn)
例如：




    
    Document

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

因?yàn)槭录芭莸脑?，我們就可以將事件綁定在不具體的父元素上，點(diǎn)擊具體的子元素，觸發(fā)其父元素的事件，這就是事件委托。

什么是javascript事件委托？

事件委托就是講事件監(jiān)聽器加在所要綁定元素的父元素上，為避免給每個(gè)特定的節(jié)點(diǎn)增加事件監(jiān)聽，避免在特定節(jié)點(diǎn)被刪除時(shí)還要再刪除它的綁定事件。
例子：

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


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

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

jQuery事件委托

這是我在調(diào)用bootstrap框架時(shí)要使用bootstrap的日歷控件

發(fā)現(xiàn)如果是動態(tài)添加的元素，無法為新添加的元素增加事件，所以是無效的，所以我們應(yīng)該將點(diǎn)擊生成日歷控件這個(gè)方法綁定在它的父元素上，使用jQuery中的on方法

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

具體實(shí)現(xiàn)：

$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
        });
});
還有一個(gè)方法是live(),不過在jQuery1.7中已被廢棄，由on()取代，就不提啦。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/86703.html

相關(guān)文章

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

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

    khs1994 評論0 收藏0

  • jQuery之事件綁定到觸發(fā)全過程及知識點(diǎn)補(bǔ)充

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

    Jioby 評論0 收藏0

  • JavaScript事件委托原理

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

    lscho 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<