jQuery中bind、live和delegate的區別
DOM樹
首先,視覺化一個HMTL文件的DOM樹是很有幫助的。一個簡單的HTML頁面看起來就像是這個樣子:
事件冒泡(又稱事件傳播)
當我們點選一個連結時,其觸發了連結元素的單擊事件,該事件則引發任何我們已繫結到該元素的單擊事件上的函式的執行。
1 |
$( 'a' ).bind( 'click' ,
function ()
{ alert( "That
tickles!" )
});
|
click事件接著會向樹的根方向傳播,廣播到父元素,然後接著是每個祖先元素,只要是它的某個後代元素上的單擊事件被觸發,事件就會傳給它。
在操縱DOM的語境中,document是根節點。
現在我們可以較容易地說明.bind()、.live()和.delegate()的不同之處了。
.bind()
1 |
$( 'a' ).bind( 'click' ,
function ()
{ alert( "That
tickles!" )
});
|
.live()
1 |
$( 'a' ).live( 'click' ,
function ()
{ alert( "That
tickles!" )
});
|
live方法還可以被繫結到具體的元素(或context)而不是document上,像這樣: