$(selector).on('click', function(){
})
$('body').on('click', selector, function(){
})
$(selector).click(function(){
})
請問這三種的差別在哪?
無論是 click or change..等,好像都有看到很多人有很多種寫法
應該還有我漏掉的
我之前也有問類似的問題就是 https://ithelp.ithome.com.tw/questions/10190350
先謝謝各位大大了
你得先了解一下原來on的傳送參數為何
.on( events [, selector ] [, data ], handler )
這用來解釋你第一與第二。
請多多看教學文件啦,不要說看到英文就不去了解。
其中有[]代表是可不需要給與。
所以正常只要使用你第一個寫法。就可以使用on。給與觸發事件與運行程式就好。
這邊就需要來解釋第二個程式碼中的 selector
這邊jquery他是用變數類型來做區分是什麼。一般來說如果是json格式的,就是傳送資料。
字串格式的,就是指定物件也就是元素指定名。
從你第二個程式碼來看,因為並不太確定selector是字串還是json或obj格式的東西。
所以並不太確定它是屬於元件指定還是資料傳送。(雖然從命名來看是元件指定)
第三個寫法,其實跟on比較無直接關係了。
一般就是直接綁定事件都元件上。
跟on不同的是,它並不會作用於後來產生的元件上。on會幫你將後來產生的元件上掛上事件。
這邊再教一個小東西
其實有關於on事件的指定。其$(selector)中所指定的元件。你可以將其視為主要作用城。
只要是在該作用域上新增的元件,只要符合就會自動掛載你所指定的事件動作。
但如果是在該作用域外所指定的元件。則不會幫你自動綁定事件。
所以一般來說,如果是想要全域性的的自動掛載。
大多數會用
$(document).on('click','#select',function(){})
或
$(body).on('click','#select',function(){})
不過將作用域設定在document其實也不好。等於是每一次新增元件的情況下。都還要run一次檢查並綁定事件處理。
可以的話最好還是限定在你知道的區塊內。盡量不要讓它全域作用。
補充說一下,一般來說,如果你並不會用到append....等這些插入元件控制用的語法。
使用第三個程式寫法就行了,不需要用到on處理。
在某些情況下,on最好還是少用。不得已非要用到的情況才去使用它會比較好。
1、3相等,3是1的語法糖。
2是事件委派的寫法。
如果你在頁面新增DOM,屬於某個class。
剛好這個class又有做事件綁定。那用上面的寫法,事件不會自動綁訂在該新增的DOM上。
用2的寫法,將事件綁訂在父元素上,透過事件捕獲和冒泡,你就可以自動將事件綁在新增的DOM上。
通常是不建議直接綁在最上層的body或document上,會影響效能。
(不過有時候懶還是會直接綁啦)