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

資訊專(zhuān)欄INFORMATION COLUMN

jquery 給動(dòng)態(tài)添加元素 實(shí)現(xiàn)點(diǎn)擊事件

DataPipeline / 2173人閱讀

摘要：方法用到了事件委托的概念來(lái)處理事件的綁定?？梢杂迷趧?dòng)態(tài)添加的元素上缺點(diǎn)需要查找那個(gè)那個(gè)元素上發(fā)生了那個(gè)事件了，盡管比少很多了，不過(guò)，你還是得浪費(fèi)時(shí)間來(lái)查找。

當(dāng)我們?cè)噲D綁定一些事件到DOM元素上的時(shí)候，通常會(huì)使用以下的四個(gè)方法
bind(),on(),live(),delegate()大家應(yīng)該用的較多的是前兩種方法。下面是我對(duì)四種方法的理解：

Bind()： .bind()是最直接的綁定方法，會(huì)綁定指定函數(shù)和事件到DOM上，這種方法很好的解決了瀏覽器在事件處理中的兼容問(wèn)題，但這個(gè)方法還有一些問(wèn)題。代碼：

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

上面的兩行代碼完成的任務(wù)都是一樣的，就是把event handler 加到全部匹配的a元素上。這里存在著一些效率方面的問(wèn)題，一方面，我們隠式地吧點(diǎn)擊事件加到了所有的a標(biāo)簽上，這個(gè)過(guò)程是昂貴的；另一方面在執(zhí)行的時(shí)候也是一種浪費(fèi)，因?yàn)樗麄兌际亲隽送患聟s執(zhí)行了很多次（我們可以把它們hook到它們的父元素，通過(guò)冒泡可以對(duì)它們中的每一個(gè)進(jìn)行區(qū)分，然后在執(zhí)行這個(gè)event handle）。
優(yōu)點(diǎn)

這個(gè)方法提供了一種在各種瀏覽器之間對(duì)事件處理的兼容性解決方案

非常方便的綁定事件到元素上

.click(), .hover()...這些非常方便的時(shí)間綁定，都是bind的一種簡(jiǎn)化處理方式

對(duì)于利用ID選出來(lái)的元素是非常好的，不僅僅是很快的可以hook上去（頁(yè)面只能有一個(gè)id），而且當(dāng)事件發(fā)生時(shí)，handler可以立即被執(zhí)行（相當(dāng)于后面的live，delegate）實(shí)現(xiàn)方式

缺點(diǎn)

它會(huì)綁定事件到所有被篩選出來(lái)的元素上

它不會(huì)綁定到在它執(zhí)行完成后動(dòng)態(tài)添加的那些元素上

當(dāng)被篩選出來(lái)的元素很多時(shí)，會(huì)出現(xiàn)效率問(wèn)題

當(dāng)頁(yè)面加載完成的時(shí)候，才可以進(jìn)行bind()，所以可能產(chǎn)生效率問(wèn)題。

.live()
.live()方法用到了事件委托的概念來(lái)處理事件的綁定。它和用.bind()來(lái)綁定事件是一樣的。.live()方法會(huì)綁定相應(yīng)的事件到你所選擇的元素的根元素上，即是document元素上。那么所有通過(guò)冒泡上來(lái)的事件都可以用這個(gè)相同的handler來(lái)處理了。它的處理機(jī)制是這樣的，一旦事件冒泡到document上，jQuery將會(huì)查找selector/event metadata,然后決定那個(gè)handler應(yīng)該被調(diào)用。不過(guò)在最新的jquery版本中好像被刪掉了。

$( "#members li a" ).live( "click", function( e ) {} );

優(yōu)點(diǎn)：

這里僅有一次的事件綁定，綁定到document上而不像.bind()那樣給所有的元素挨個(gè)綁定

那些動(dòng)態(tài)添加的elemtns依然可以觸發(fā)那些早先綁定的事件，因?yàn)槭录嬲慕壎ㄊ窃赿ocument上

你可以在document ready之前就可以綁定那些需要的事件

缺點(diǎn)：

從1.7開(kāi)始已經(jīng)不被推薦了，所以你也要開(kāi)始逐步淘汰它了。

Chaining沒(méi)有被正確的支持

當(dāng)使用event.stopPropagation()是沒(méi)用的，因?yàn)槎家竭_(dá)document

因?yàn)樗械膕elector/event都被綁定到document,
所以當(dāng)我們使用matchSelector方法來(lái)選出那個(gè)事件被調(diào)用時(shí)，會(huì)非常慢

當(dāng)發(fā)生事件的元素在你的DOM樹(shù)中很深的時(shí)候，會(huì)有performance問(wèn)題

.Delegate()
.delegate()有點(diǎn)像.live(),不同于.live()的地方在于，它不會(huì)把所有的event全部綁定到document,而是由你決定把它放在哪兒。而和.live()相同的地方在于都是用event delegation.推薦使用.delegate() 代替.live()

$( "#members" ).delegate( "li a", "click", function( e ) {} );

優(yōu)點(diǎn)：

你可以選擇你把這個(gè)事件放到那個(gè)元素上了 chaining被正確的支持了

jQuery仍然需要迭代查找所有的selector/eventdata來(lái)決定那個(gè)子元素來(lái)匹配，但是因?yàn)槟憧梢詻Q定放在那個(gè)根元素上，所以可以有效的減小你所要查找的元素。

可以用在動(dòng)態(tài)添加的元素上

缺點(diǎn)：

需要查找那個(gè)那個(gè)元素上發(fā)生了那個(gè)事件了，盡管比document少很多了，不過(guò)，你還是得浪費(fèi)時(shí)間來(lái)查找。

.On()
其實(shí).bind(), .live(), .delegate()都是通過(guò).on()來(lái)實(shí)現(xiàn)的，.unbind(), .die(), .undelegate(),也是一樣的都是通過(guò).off()來(lái)實(shí)現(xiàn)的，這是1.8.2的源碼：

$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 

// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

優(yōu)點(diǎn)：

提供了一種統(tǒng)一綁定事件的方法

仍然提供了.delegate()的優(yōu)點(diǎn)，當(dāng)然如果需要你也可以直接用.bind()

缺點(diǎn)：

也許會(huì)對(duì)你產(chǎn)生一些困擾，因?yàn)樗[藏了一前面我們所介紹的三種方法的細(xì)節(jié)。

結(jié)論：

用.bind()的代價(jià)是非常大的，它會(huì)把相同的一個(gè)事件處理程序hook到所有匹配的DOM元素上

不要再用.live()了，它已經(jīng)不再被推薦了，而且還有許多問(wèn)題

.delegate()會(huì)提供很好的方法來(lái)提高效率，同時(shí)我們可以添加一事件處理方法到動(dòng)態(tài)添加的元素上。

我們可以用.on()來(lái)代替上述的3種方法

參考資料：https://www.cnblogs.com/moonr...
http://www.alfajango.com/blog...

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

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

相關(guān)文章

  • jQuery DOM節(jié)點(diǎn)的創(chuàng)建、插入、刪除

    摘要：通過(guò)方法添加的元素剛好相反，內(nèi)容在方法前面，無(wú)論是一個(gè)選擇器表達(dá)式或創(chuàng)建作為標(biāo)記上的標(biāo)記它都將被插入到目標(biāo)容器的末尾。主要的不同是語(yǔ)法特別是插入內(nèi)容和目標(biāo)的位置。 DOM節(jié)點(diǎn)的創(chuàng)建 DOM創(chuàng)建節(jié)點(diǎn)及節(jié)點(diǎn)屬性 首先，介紹如何使用JavaScript創(chuàng)建div節(jié)點(diǎn)元素，主要包括創(chuàng)建div節(jié)點(diǎn)元素的屬性和創(chuàng)建div節(jié)點(diǎn)元素的樣式兩大部分內(nèi)容 創(chuàng)建流程： 創(chuàng)建節(jié)點(diǎn)(常見(jiàn)的：元素、屬性和文本)...

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

  • 【JavaScript系列】動(dòng)態(tài)綁定事件方法：(1)jquery的on方法；(2)html元素綁定

    摘要：提示如需移除事件處理程序，請(qǐng)使用方法。說(shuō)明和綁定的點(diǎn)擊事件被的事件覆蓋。分析不同的綁定方式執(zhí)行順序?qū)傩栽厥录录?。元素綁定事件刪除按鈕。屬性綁定事件動(dòng)態(tài)綁定事件方法的方法的屬性綁定。 一、動(dòng)態(tài)監(jiān)聽(tīng)加載對(duì)象 當(dāng)使用js或jQuery動(dòng)態(tài)創(chuàng)建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監(jiān)聽(tīng)事件...

    young.li 評(píng)論0 收藏0

  • jquery .bind() vs .live() vs .delegate() vs .on()

    摘要：但是當(dāng)我們點(diǎn)擊新添加的元素也就是時(shí)，卻沒(méi)有把這個(gè)加給它。它的原理是利用事件冒泡最終代理給最頂層的。對(duì)于動(dòng)態(tài)生成的元素也生效因?yàn)槠鋵?shí)是綁定在上的。 假設(shè)我們有這樣一段html： book 1 book 2 add a li 1: .bind().bind方法的用法是這樣的：targetElment.bind(eventType, eventHandler)所以假入我...

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

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

    摘要：在說(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 ...

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

  • jQuery動(dòng)畫(huà)效果、jQuery插件使用

    摘要：一事件的綁定與解綁的簡(jiǎn)單綁定事件新版本使用為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。將整個(gè)文件放至項(xiàng)目的任意目錄不要移動(dòng)其文件結(jié)構(gòu)，它們具有完整的依賴(lài)體系。 一、事件的綁定與解綁 1.1 jQuery的簡(jiǎn)單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定當(dāng)這個(gè)事件發(fā)生時(shí)運(yùn)行的函數(shù)。on()方法...

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

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

0條評(píng)論

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