jQuery事件委托

 

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

事件委托

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

.live()

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

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

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

到目前為止,一切似乎很完美??上В聦?shí)并非如此。因?yàn)?live()方法并不完美,它有如下幾個(gè)主要缺點(diǎn):

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

    網(wǎng)友評(píng)論