亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

js動(dòng)態(tài)添加事件-事件委托

frolc / 1132人閱讀

摘要：解決這一問(wèn)題的核心就是利用的委托事件。但是，如果用事件委托，只需要一個(gè)元素綁定事件即可。

作者：白狼 出處：http://www.manks.top/javascri... 本文版權(quán)歸作者，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁(yè)面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。
其所謂的動(dòng)態(tài)添加事件實(shí)質(zhì)就是指js中的事件委托。

我們知道在js中，事件處理只能綁定在當(dāng)前被選中的元素上，換句話也就是說(shuō)，事件處理只能綁定在當(dāng)前文檔已經(jīng)存在的元素上！但是，往往小伙伴們都會(huì)遇到一個(gè)問(wèn)題就是，我的元素是后來(lái)動(dòng)態(tài)添加到頁(yè)面的，而我又想給該元素綁定事件，怎么處理？

為了說(shuō)明白這一問(wèn)題，我們假設(shè)需要給后來(lái)添加到當(dāng)前頁(yè)面的元素添加click事件。

解決這一問(wèn)題的核心就是利用js的委托事件。委派事件的優(yōu)勢(shì)就是可以給未存在的元素綁定事件，而且委派事件往往開銷也會(huì)更小！

題外話：舉一個(gè)最簡(jiǎn)單的例子：當(dāng)頁(yè)面上有1000個(gè)div的時(shí)候，如果直接給div綁定click事件，其會(huì)為1000個(gè)元素綁定事件。但是，如果用事件委托，只需要一個(gè)元素綁定事件即可。PS:希望啰里啰嗦能夠讓你明白事件委托的含義。

我們只是想知道動(dòng)態(tài)創(chuàng)建的元素如何添加事件，你說(shuō)這么多做什么，做什么...

好吧，言歸正傳，看具體實(shí)現(xiàn)：

// 模擬動(dòng)態(tài)創(chuàng)建元素li
$.ajax({
    type: "get",
    data: {},
    success: function () {                
        $("
  • ").addClass("aaa").html("11111111").appendTo($("body"));
    },
});

// 給為我們剛剛動(dòng)態(tài)創(chuàng)建的元素添加事件
$(document).on("click", "li[class=aaa]", function(){
    console.log("ffffd");
});

    • [考慮目前國(guó)內(nèi)網(wǎng)站大部分采集文章十分頻繁，更有甚者不注明原文出處，原作者更希望看客們查看原文，以防有任何問(wèn)題不能更新所有文章，避免誤導(dǎo)！]
    查看原文

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

    轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/80361.html

    相關(guān)文章

    • 理解Javascript中的事件綁定與事件委托

      摘要：最近在深入實(shí)踐中，遇到了一些問(wèn)題，比如我需要為動(dòng)態(tài)創(chuàng)建的元素綁定事件，那么普通的事件綁定就不行了，于是通過(guò)上網(wǎng)查資料了解到事件委托，因此想總結(jié)一下中的事件綁定與事件委托。事件冒泡認(rèn)為事件促發(fā)的最深層元素首先接收事件。 最近在深入實(shí)踐js中，遇到了一些問(wèn)題，比如我需要為動(dòng)態(tài)創(chuàng)建的DOM元素綁定事件，那么普通的事件綁定就不行了，于是通過(guò)上網(wǎng)查資料了解到事件委托，因此想總結(jié)一下js中的事件綁...

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

    • 簡(jiǎn)單聊聊瀏覽器JS事件觸發(fā)機(jī)制

      摘要：事件冒泡由微軟提出，事件會(huì)從最內(nèi)從的元素開始發(fā)生，再向外傳播，正好與事件捕獲相反。為了解決上述問(wèn)題，我們可以利用事件委托的思想，在父級(jí)注冊(cè)一個(gè)事件監(jiān)聽器，統(tǒng)一進(jìn)行子元素的事件處理。 原理 事件捕獲 由網(wǎng)景最先提出，事件會(huì)從最外層開始發(fā)生，直到最具體的元素，也就是說(shuō)假如父元素與子元素都綁定有點(diǎn)擊事件，又互相重疊，那么先出發(fā)的會(huì)是父元素的事件，然后再傳遞到子元素。 事件冒泡 由微軟提出，事...

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

    • Javascript事件流

      摘要：見下圖更直觀在事件流中，事件的目標(biāo)在捕獲階段不會(huì)接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個(gè)階段是目標(biāo)階段，于是事件在上發(fā)生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流？ 事件流所描述的是從頁(yè)面中接受事件的順序 2.DOM事件流的三個(gè)階...

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

    • Javascript事件流

      摘要：見下圖更直觀在事件流中，事件的目標(biāo)在捕獲階段不會(huì)接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個(gè)階段是目標(biāo)階段，于是事件在上發(fā)生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流？ 事件流所描述的是從頁(yè)面中接受事件的順序 2.DOM事件流的三個(gè)階...

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

    • Javascript事件流

      摘要：見下圖更直觀在事件流中，事件的目標(biāo)在捕獲階段不會(huì)接受到事件，這意味著在捕獲階段，事件從到后就停止了。下一個(gè)階段是目標(biāo)階段，于是事件在上發(fā)生，并在事件處理中被看成是冒泡階段的一部分，然后，冒泡階段發(fā)生，事件又傳回。 CONTENTS DOM事件流 事件冒泡 阻止冒泡 事件捕獲 事件委托 DOM事件流 1.什么是事件流？ 事件流所描述的是從頁(yè)面中接受事件的順序 2.DOM事件流的三個(gè)階...

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

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

    0條評(píng)論

    最新活動(dòng)
    閱讀需要支付1元查看
    <