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

更新時(shí)間：2016年07月19日 09:57:43 投稿：jingxian

下面小編就為大家?guī)硪黄仙Ｕ刯s動(dòng)態(tài)添加事件--- 事件委托。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

其所謂的動(dòng)態(tài)添加事件實(shí)質(zhì)就是指js中的事件委托。

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

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

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

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

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

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

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

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

以上這篇老生常談js動(dòng)態(tài)添加事件--- 事件委托就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解
這篇文章主要介紹了webpack4 SplitChunks實(shí)現(xiàn)代碼分隔詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
javascript,jquery閉包概念分析
偶爾聽人說javascript閉包，讓我聯(lián)想起以前學(xué)編譯原理和數(shù)字邏輯里講的閉包，以前上課講的閉包很難懂，而且含有遞歸的意思在里面，現(xiàn)在不想再查看里面的閉包概念。
2010-06-06
JS實(shí)現(xiàn)簡(jiǎn)單可拖動(dòng)的模態(tài)框
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單可拖動(dòng)的模態(tài)框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
JS簡(jiǎn)單實(shí)現(xiàn)浮動(dòng)窗口效果示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)浮動(dòng)窗口效果,涉及javascript操作浮動(dòng)窗口的創(chuàng)建、打開、關(guān)閉等相關(guān)操作技巧,需要的朋友可以參考下
2016-09-09
分析JS中this引發(fā)的bug
這篇文章主要介紹了分析JavaScript中this引發(fā)的bug以及相關(guān)的處理方法分析，一起學(xué)習(xí)下吧。
2017-12-12
BootStrap輪播HTML代碼（推薦）
本文給大家分享bootstrap輪播h tml代碼，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有參考借鑒，需要的朋友參考下吧
2016-12-12
微信小程序template模板引入的問題小結(jié)
這篇文章主要介紹了微信小程序template模板引入的問題小結(jié),本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
JS實(shí)現(xiàn)的表格行鼠標(biāo)點(diǎn)擊高亮效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)的表格行鼠標(biāo)點(diǎn)擊高亮效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-11-11
JS獲取input[file]的值并顯示在頁面的實(shí)現(xiàn)方法
下面小編就為大家分享一篇JS獲取input[file]的值并顯示在頁面的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
一文詳解javascript語言中的類(class)
class類是一種抽象的體現(xiàn),用來表示具有相同特性的一類事物,是面向?qū)ο缶幊滩豢扇鄙俚墓ぞ?下面這篇文章主要介紹了javascript語言中類class的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04