jQuery普通繫結事件和on委託事件對比

2022-08-27 22:27:20 字數 673 閱讀 4426

以click事件為例:

普通繫結事件:$('.btn1').click(function(){}繫結

on繫結事件:$(document).on('click','.btn2',function(){}繫結

那麼這兩種方式有什麼區別呢?

首先我們看看在實踐上的區別:

①click事件是在頁面載入後,獲取的所有類名為btn1的元素,然後繫結了這個click事件,你要是通過其他操作再生成乙個btn1元素,它就沒有click這個事件;

②而on()事件起到了監聽的效果,可以實現動態html元素繫結,比如一開始只有乙個btn2元素,你通過某種方法又加了乙個btn2元素,這個元素也可以點選,可以無限新增btn2。

那麼怎麼實現這個動態監聽的過程呢?

on()事件相當於是$(document).click(function()}),給document新增了乙個click事件,黨點選的是btn,事件冒泡原理,從裡到外,就相當於點選了document,那麼就會執行後面的操作,本質上只給document新增了乙個事件,而click()事件是給所有btn新增了click事件。

另外on()事件可以新增多個事件。

on()委託事件的優點:原來的事件繫結,要繫結好多事件,現在只需要繫結乙個事件,大大提高了效率和頁面效能,解決的動態新增元素導致不能觸發的bug。

jq1.7+開始支援。

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版本整合了之前的三種方式的新事件繫結機...