您好,登錄后才能下訂單哦!
JQuery的delegate()方法是給頁面里的元素(或者頁面里未來將會有的元素)綁定事件,同樣的從結果來看JQuery的bind()方法同樣也是給元素綁定事件,但是它(bind)只能給頁面中當前已經存在的元素去綁定事件。
JQuery的live()方法同樣也是給元素綁定事件,但是它(live)在頁面有改動的時候,JQuery把相應函數綁定到$(document)元素上。任何時候只要有事件冒泡到document節點上,它就查看該事件是否是一個綁定事件,以及該事件的目標元素與這一選擇器是否匹配,如果都是的話,則執行函數。JQuery 1.7以后就不支持live()了。
JQuery的on()方法同樣也是給元素綁定事件,它(on)是整合了之前的三種方式的新事件綁定機制。
例子:
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").delegate("p","click",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>這是一個新段落。</p>").insertAfter("button"); }); }); </script> </head> <body> <div > <p>這是一個段落。</p> <p>請點擊任意一個 p 元素,它會消失。包括本段落。</p> <button>在本按鈕后面插入一個新的 p 元素</button> </div> <p><b>注釋:</b>通過使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素會受到影響。</p> </body> </html> |
標紅的P是通過點擊button才能被加載到頁面的,也就是說,在document.ready的時候頁面里還沒有這個P元素,所以說需要用delegate()方法給P綁定事件,此時用click()或者bind()是做不到給可能被加載到這個頁面的P元素綁定事件的。
但是這個button是頁面中已經存在的,用click就可以給綁定上事件。當然了,用delegate()也行。
為什么選擇.live()或.delegate()而不是.bind()
畢竟,bind看起來似乎更加的明確和直接,難道不是嗎?嗯,有兩個原因讓我們更愿意選擇delegate或live而不是bind:
1. 為了把處理程序附加到可能還未存在于DOM中的DOM元素之上。因為bind是直接把處理程序綁定到各個元素上,它不能把處理程序綁定到還未存在于頁面中的元素之上。
2. 如果你運行了$('a').bind(…),而后新的鏈接經由AJAX加入到了頁面中,則你的bind處理程序對于這些新加入的鏈接來說是無效的。而另一方面live和delegate則是被綁定到另一個祖先節點上,因此其對于任何目前或是將來存在于該祖先元素之內的元素都是有效的。
3. 或者為了把處理程序附加到單個元素上或是一小組元素之上,監聽后代元素上的事件而不是循環遍歷并把同一個函數逐個附加到DOM中的100個元素上。把處理程序附加到一個(或是一小組)祖先元素上而不是直接把處理程序附加到頁面中的所有元素上,這種做法帶來了性能上的好處。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。