iT邦幫忙

0

jquery click 事件的長相差別?

$(selector).on('click', function(){
})
$('body').on('click', selector, function(){
})
$(selector).click(function(){
})

請問這三種的差別在哪?
無論是 click or change..等,好像都有看到很多人有很多種寫法
應該還有我漏掉的
我之前也有問類似的問題就是 https://ithelp.ithome.com.tw/questions/10190350
先謝謝各位大大了

2 個回答

2
浩瀚星空
iT邦高手 1 級 ‧ 2018-11-19 18:01:13
最佳解答

你得先了解一下原來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最好還是少用。不得已非要用到的情況才去使用它會比較好。

小松菜奈 iT邦研究生 4 級 ‧ 2018-11-20 16:52:22 檢舉

順便問一下大大,如果有很多 click (50個) 事件,你都會寫在同一個 js 嗎?還是會怎麼管理呢

0
froce
iT邦高手 1 級 ‧ 2018-11-20 09:09:14

1、3相等,3是1的語法糖。

2是事件委派的寫法。
如果你在頁面新增DOM,屬於某個class。
剛好這個class又有做事件綁定。那用上面的寫法,事件不會自動綁訂在該新增的DOM上。
用2的寫法,將事件綁訂在父元素上,透過事件捕獲和冒泡,你就可以自動將事件綁在新增的DOM上。

通常是不建議直接綁在最上層的body或document上,會影響效能。
(不過有時候懶還是會直接綁啦)

看更多先前的回應...收起先前的回應...
小松菜奈 iT邦研究生 4 級 ‧ 2018-11-20 16:52:29 檢舉

順便問一下大大,如果有很多 click (50個) 事件,你都會寫在同一個 js 嗎?還是會怎麼管理呢

froce iT邦高手 1 級 ‧ 2018-11-21 09:02:58 檢舉

這要看你的規劃,所以沒人可以給你答案。
自己去弄套coding style遵守就好。

就算是自己一個人coding,style還是很重要,能幫助你以後維護code找的到地方。

wolfwang iT邦新手 3 級 ‧ 2018-11-21 12:57:52 檢舉

看到 50 個 click 事件,第一個直覺是...會不會是沒有規劃好才會有那麼多 click 事件。

小松菜奈 iT邦研究生 4 級 ‧ 2018-11-21 20:29:03 檢舉

每一個click事件做的動作都不一樣~我也不清楚怎麼寫才是好的。

我要發表回答

立即登入回答