成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

GitCafe / 2531人閱讀

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

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

什么是javascript事件冒泡？

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




    
    Document

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

因?yàn)槭录芭莸脑恚覀兙涂梢詫⑹录壎ㄔ诓痪唧w的父元素上，點(diǎn)擊具體的子元素，觸發(fā)其父元素的事件，這就是事件委托。

什么是javascript事件委托？

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

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


// 找到父元素，添加監(jiān)聽(tīng)器...
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)如果是動(dòng)態(tài)添加的元素，無(wú)法為新添加的元素增加事件，所以是無(wú)效的，所以我們應(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(),不過(guò)在jQuery1.7中已被廢棄，由on()取代，就不提啦。

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/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); 前言：請(qǐng)先回顧下我之前寫(xiě)的一篇文章：JavaScript之事件委...

    khs1994 評(píng)論0 收藏0

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

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

    Jioby 評(píng)論0 收藏0

  • JavaScript事件委托原理

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

    lscho 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<