DOM樹

首先，視覺化一個HMTL文件的DOM樹是很有幫助的。一個簡單的HTML頁面看起來就像是這個樣子：

事件冒泡(又稱事件傳播)

當我們點選一個連結時，其觸發了連結元素的單擊事件，該事件則引發任何我們已繫結到該元素的單擊事件上的函式的執行。

1	$('a').bind('click', function() { alert("That tickles!") });

因此一個單擊操作會觸發alert函式的執行。

click事件接著會向樹的根方向傳播，廣播到父元素，然後接著是每個祖先元素，只要是它的某個後代元素上的單擊事件被觸發，事件就會傳給它。

在操縱DOM的語境中，document是根節點。

現在我們可以較容易地說明.bind()、.live()和.delegate()的不同之處了。

.bind()

1	$('a').bind('click', function() { alert("That tickles!") });

這是最簡單的繫結方法了。JQuery掃描文件找出所有的$(‘a’)元素，並把alert函式繫結到每個元素的click事件上。

.live()

1	$('a').live('click', function() { alert("That tickles!") });

JQuery把alert函式繫結到$(document)元素上，並使用’click’和’a’作為引數。任何時候只要有事件冒泡到 document節點上，它就檢視該事件是否是一個click事件，以及該事件的目標元素與’a’這一CSS選擇器是否匹配，如果都是的話，則執行函式。

live方法還可以被繫結到具體的元素(或context)而不是document上，像這樣：

相關推薦