jquery事件繫結

2022-02-25 06:12:48 字數 2168 閱讀 1456

jquery事件繫結方法研究

每當我們想給某個元素繫結事件的時候,第乙個想到的方法是bind,我們就先來說說bind。

bind的作用是給具體的某個元素繫結事件,比如

$ ( 『button』 ) . bind ( 『click』 , function ( )  ) ;

給所有的button元素新增了點選事件處理方法。這似乎已經可以完成大部分的事件繫結任務了,然而有乙個問題它無法解決–如果某一元素是新新增的怎麼辦?bind將事件處理函式繫結在了具體的元素上,而新新增的元素身上是沒有被繫結處理函式的。也就是說,如果執行完上面的**後再動態新增乙個button元素,新新增的這個button元素是沒有被繫結事件處理函式的。

於是,live出現了。對於剛開始接觸jquery的人來說,live是乙個很神奇的事件繫結方法,無論某一元素已經存在還是將來會被新增到頁面中,live都能將事件繫結到它身上。

真的很神奇嗎?其實它的原理很簡單,那就是「事件委派」。

什麼是事件委派?舉個簡單的例子。

假如有乙個**,我們要動態增刪裡面的行元素,同時想給每乙個行元素繫結乙個點選事件。給具體的tr元素繫結事件是不現實的,因為它們總是不斷變化的。於是我們可以換個思路,為什麼一定要給tr元素繫結事件呢?

我們可以把事件繫結到table元素上,發生在table的子元素身上的點選事件都會冒泡到table元素上,在這裡可以做乙個比較,如果點選事件的目標是tr元素,執行繫結的函式就好了。這就是事件委派,委派某個元素處理子元素觸發的事件。

$ ( 『table tr』 ) . live ( 『click』 , function ( )  ) ;

這樣,就可以給tr元素繫結點選事件,無論它是已經存在的,還是將來被新增的。

那麼,執行完上面的**,事件確實被繫結在table元素上了嗎?不!

現實中,我們要動態新增的元素指不定在dom樹的哪一層。為了讓所有新新增的元素都能觸發預先繫結的事件處理函式,jquery將事件處理函式委派在了dom樹的根元素,也就是document元素,身上。這樣一來,無論新新增的元素位於dom樹的哪個層級,它觸發的事件總會冒泡到根元素上。在這裡,可以做乙個判斷,如果事件觸發目標是想要繫結事件處理函式的那個元素,執行該函式就好了。

這看起來很美好,似乎我們完全可以放棄bind,在任何情況下都可以使用live了。不過,等等,如果真是這樣的話,後邊的delegate就沒有用武之地了。

live方法的好處不言而喻,然而它也有弊端。假設我們還是要給tr元素繫結點選事件。如果頁面中有一千個元素,只有10個是tr元素,會是什麼情況?那990個不相干的元素觸發的事件也會冒泡到根元素上,在那裡做一次比較,無形當中就會帶來效能的消耗。這可真是寧可錯殺一千,也不放過乙個啊。

顯然,live並沒有看上去的那麼美好,於是delegate閃亮全場了。

我們要給tr元素繫結事件,離它最近的父元素就是table了。既然如此,我們為什麼還要不辭辛苦地把事件繫結在document元素上,而不是綁在table身上呢?delegate就是幹這個活的。

$ ( 『table』 ) . delegate ( 『tr』 , 『click』 , function ( )  ) ;

上面的**將點選事件委派在table元素上,其下的tr元素身上的點選事件會觸發處理函式。

到目前為此,我們認識了三個和事件繫結有關的方法。他們的使用方法和使用時機你都記住了嗎?好吧,我是費了點功夫才記住並區分它們的。

繫結事件居然有三個方法,太可怕了,要是只有乙個就好了。其實,jquery的作者也是這麼想的。從1.7版本開始,jquery新增了乙個新的事件繫結方法–on–來代替之前提到的所有方法。這真是乙個令人欣喜的訊息。

on的使用方法很簡單,如果你沒有指定後代元素,那麼就是簡單的事件繫結,類似於bind。比如

$ ( 『tr』 ) . on ( 『click』 , function ( )  ) ;

會把點選事件繫結在tr身上,如果執行完**後新新增了乙個tr元素,那它身上自然是沒有事件處理函式的。

那怎麼做事件委派呢?是這個樣子的

$ ( 『table』 ) . on ( 『click』 , 『tr』 , function ( )  ) ;

事件委派到了table元素身上,它的tr子元素身上的點選事件會觸發事件處理函式。

好了,從今天起,忘掉bind、live和delegate吧,on才是你居家旅行,必備的神器!據說,只是據說,在新版本中,就算你呼叫bind、live或delegate,它內部都會呼叫on。既然如此,我們為什麼不自己使用on呢?

jquery 事件繫結

1.bind bind 方法為被選元素新增乙個或多個事件處理程式,並規定事件發生時執行的函式。多個事件用空格分開 可以繫結的事件有click dblclick mouseover mouseout mousedown mouseup等滑鼠事件,至於鍵盤事件,嘗試沒發現效果。selector bind...

jquery繫結事件

1.bind 向匹配元素新增乙個或多個事件處理器。使用方式 selector bind event,data,function event 必需項 新增到元素的乙個或多個事件,例如 click,dblclick等 單事件處理 例如 selector bind click data,function ...

jQuery事件繫結

區別 bind 是直接繫結在元素上 live 則是通過冒泡的方式來繫結到元素上的。更適合列表型別的,繫結到document dom節點上。和.bind 的優勢是支援動態資料。delegate 則是更精確的小範圍使用事件 效能優於.live on 則是最新的1.9版本整合了之前的三種方式的新事件繫結機...