jquery 給動態添加元素實現點擊事件

DataPipeline 發布于2019-08-22 17:30 / 2115人閱讀

摘要：方法用到了事件委托的概念來處理事件的綁定?？梢杂迷趧討B添加的元素上缺點需要查找那個那個元素上發生了那個事件了，盡管比少很多了，不過，你還是得浪費時間來查找。

當我們試圖綁定一些事件到DOM元素上的時候，通常會使用以下的四個方法
bind(),on(),live(),delegate()大家應該用的較多的是前兩種方法。下面是我對四種方法的理解：

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

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

上面的兩行代碼完成的任務都是一樣的，就是把event handler 加到全部匹配的a元素上。這里存在著一些效率方面的問題，一方面，我們隠式地吧點擊事件加到了所有的a標簽上，這個過程是昂貴的；另一方面在執行的時候也是一種浪費，因為他們都是做了同一件事卻執行了很多次（我們可以把它們hook到它們的父元素，通過冒泡可以對它們中的每一個進行區分，然后在執行這個event handle）。
優點

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

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

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

對于利用ID選出來的元素是非常好的，不僅僅是很快的可以hook上去（頁面只能有一個id），而且當事件發生時，handler可以立即被執行（相當于后面的live，delegate）實現方式

缺點

它會綁定事件到所有被篩選出來的元素上

它不會綁定到在它執行完成后動態添加的那些元素上

當被篩選出來的元素很多時，會出現效率問題

當頁面加載完成的時候，才可以進行bind()，所以可能產生效率問題。

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

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

優點：

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

那些動態添加的elemtns依然可以觸發那些早先綁定的事件，因為事件真正的綁定是在document上

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

缺點：

從1.7開始已經不被推薦了，所以你也要開始逐步淘汰它了。

Chaining沒有被正確的支持

當使用event.stopPropagation()是沒用的，因為都要到達document

因為所有的selector/event都被綁定到document,
所以當我們使用matchSelector方法來選出那個事件被調用時，會非常慢

當發生事件的元素在你的DOM樹中很深的時候，會有performance問題

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

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

優點：

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

jQuery仍然需要迭代查找所有的selector/eventdata來決定那個子元素來匹配，但是因為你可以決定放在那個根元素上，所以可以有效的減小你所要查找的元素。

可以用在動態添加的元素上

缺點：

需要查找那個那個元素上發生了那個事件了，盡管比document少很多了，不過，你還是得浪費時間來查找。

.On()
其實.bind(), .live(), .delegate()都是通過.on()來實現的，.unbind(), .die(), .undelegate(),也是一樣的都是通過.off()來實現的，這是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 ) {} );

優點：

提供了一種統一綁定事件的方法

仍然提供了.delegate()的優點，當然如果需要你也可以直接用.bind()

缺點：

也許會對你產生一些困擾，因為它隱藏了一前面我們所介紹的三種方法的細節。

結論：

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

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

.delegate()會提供很好的方法來提高效率，同時我們可以添加一事件處理方法到動態添加的元素上。

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

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

GPU云服務器云服務器 js給元素添加class js函數添加點擊事件 php動態添加元素 js實現動態生成元素

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95235.html

jQuery DOM節點的創建、插入、刪除

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

rainyang 2019-08-21 11:54 評論0 收藏0
【JavaScript系列】動態綁定事件方法：(1)jquery的on方法；(2)html元素綁定

摘要：提示如需移除事件處理程序，請使用方法。說明和綁定的點擊事件被的事件覆蓋。分析不同的綁定方式執行順序屬性元素事件事件。元素綁定事件刪除按鈕。屬性綁定事件動態綁定事件方法的方法的屬性綁定。一、動態監聽加載對象當使用js或jQuery動態創建元素(例如append，appendChildren)，再用on(事件, function(){...})或addEventListener監聽事件...

young.li 2019-08-26 10:20 評論0 收藏0
jquery .bind() vs .live() vs .delegate() vs .on()

摘要：但是當我們點擊新添加的元素也就是時，卻沒有把這個加給它。它的原理是利用事件冒泡最終代理給最頂層的。對于動態生成的元素也生效因為其實是綁定在上的。假設我們有這樣一段html： book 1 book 2 add a li 1: .bind().bind方法的用法是這樣的：targetElment.bind(eventType, eventHandler)所以假入我...

baukh789 2019-08-20 17:23 評論0 收藏0
jQuery事件委托為未添加的元素綁定事件

摘要：在說事件委托之前先介紹一下事件冒泡。什么是事件委托事件委托就是講事件監聽器加在所要綁定元素的父元素上，為避免給每個特定的節點增加事件監聽，避免在特定節點被刪除時還要再刪除它的綁定事件。在說事件委托之前,先介紹一下事件冒泡。什么是javascript事件冒泡？根據紅寶書，事件開始是由最具體的元素接受，然后逐級傳播到較為不具體的節點例如： Document ...

GitCafe 2019-08-21 11:26 評論0 收藏0
jQuery動畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。將整個文件放至項目的任意目錄不要移動其文件結構，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。on()方法...

MkkHou 2019-08-29 16:16 評論0 收藏0