jQuery事件委托

 

隨著DOM結(jié)構(gòu)的復雜化和Ajax等動態(tài)腳本技術的運用,有了較多的動態(tài)添加進來的元素,直接用JQ添加click事件會發(fā)現(xiàn)新添加進來的元素并不能直接選取到,在這里就需要用到事件委托方法,JQ為事件委托提供了live()、dalegate()和on()方法。  

事件委托

我們知道,DOM在為頁面中的每個元素分派事件時,相應的元素一般都在事件冒泡階段處理事件。在類似 body > div > a 這樣的結(jié)構(gòu)中,如果單擊a元素,click事件會從a一直冒泡到div和body(即document對象)。因此,發(fā)生在a上面的單擊事件,div和body元素同樣可以處理。而利用事件傳播(這里是冒泡)這個機制,就可以實現(xiàn)事件委托。具體來說,事件委托就是事件目標自身不處理事件,而是把處理任務委托給其父元素或者祖先元素,甚至根元素(document)。

.live()

jQuery 1.3新增的live()方法,用法如下:

$("#info_table td").live("click",function(){/*顯示更多信息*/});

這里的.live()方法會把click事件綁定到$(document)對象,而且只需要給$(document)綁定一次,然后就能夠處理后續(xù)動態(tài)加載的單元格的單擊事件。在接收到任何事件時,$(document)對象都會檢查事件類型和事件目標,如果是click事件且事件目標是td,那么就執(zhí)行委托給它的處理程序。

到目前為止,一切似乎很完美??上В聦嵅⒎侨绱?。因為.live()方法并不完美,它有如下幾個主要缺點:

  • $()函數(shù)會找到當前頁面中的所有td元素并創(chuàng)建jQuery對象,但在確認事件目標時卻不用這個td元素集合,而是使用選擇符表達式與event.target或其祖先元素進行比較,因而生成這個jQuery對象會造成不必要的開銷;
  • 默認把事件綁定到$(document)元素,如果DOM嵌

    網(wǎng)友評論