作者TonyQ (沉默是金。)
看板Ajax
標題Re: [問題] 如何判斷element裡是否已定義event
時間Fri May 14 20:18:50 2010
※ 引述《hera1016 ()》之銘言：
: 附上code
:
: $(document).ready( function() {
: $("*").click( function() {
: var target = $("div's id");
: $.each(target, function(){
: $(this).click(function(){
: alert($(this).text());
: });
: });
: })
: });
: --
: ※ 發信站: 批踢踢實業坊(ptt.cc)
: ◆ From: 140.113.215.200
: 推 adamp3:http://www.quirksmode.org/js/events_order.html 05/13 17:12
: 推 adamp3:http://lab.distilldesign.com/event-delegation/ Ex3 05/13 17:17
: → hera1016:大感謝樓上 問題已解!!!!!!(L) 05/13 21:01
: → TonyQ:這種情形用live是比較適合的. 05/14 03:36
: → hera1016:不太懂樓上的意思耶 @_@? 05/14 12:47
: 推 wxyy:.delegate() 跟 .live() 都可以解決這個問題 05/14 16:46
: → wxyy:不過優缺點 就要另外請教高手解釋了.... 05/14 16:47
其實官網文件有比較這兩個用途
http://api.jquery.com/delegate/
其中提到delegate 只是一個 live的特殊用法，
從sample中也很明顯看的出來兩者差異不大。XD
說穿了 delegate = find + live 。:p
不過以正常的作法我不太會用到delegate...
以他的例子來講
delegate
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
live
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
那為甚麼不乾脆
$("table td").live("hover", function(){
$(this).toggleClass("hover");
});
就好還要繞一圈 XD
其實在這個事件上這描述也是等價的。（所以我才說他等於find+binding）
-----------------------------------------------------
不過那不是重點，原推文說live比較好是相對於原文來看的，
只要你的html dom符合以下前提，都可以試著使用live。
會一直動態增刪元件（不論是否透過ajax增刪），
且所有同類元件都擁有相同行為。
live 的本意就是透過偵測母元素的事件，
去瞭解目前觸發元素的型別跟執行對應的事件函式。
在這個過程中我們可以省下很多對每個元素單獨綁定所造成的困擾，
包含綁定時間點的判斷，避免因為誤判而重複綁定。
（不過誤用live還是會造成重複綁定。）
不過缺點就是因為幾乎每個事件的觸發都需要多作一個檢測，
多少會影響到執行效率，一個頁面能容納的live量並不會多，
能一次綁定就好得狀況下，拿live當click用會很不划算。（個人意見）
如果有滿足前面所述的前提（動態增刪），就可以試著用用看囉。
一般來講動態增刪的東西除dialog/ajax 以外，應該不多才對。
--
I am a person, and I am always thinking .
Thinking in love , Thinking in life ,
Thinking in why , Thinking in worth.
I can't believe any of what ,
I am just thinking then thinking ,
but worst of all , most of mine is thinking not actioning...
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.137.14.63
→ wxyy:依照上面網址最後提到的 如果開頭的selector沒第二個參數 05/14 21:19
→ wxyy:那用 .delegate() 效率會比較好.. 05/14 21:19
→ wxyy:如果需要 chain method call 也只能用 .delegate() 05/14 21:21
→ TonyQ:我倒是沒注意到他是把事件bind到context這件事，這樣說的話 05/14 21:42
→ TonyQ:他效率的確會比較好，而且也可以減少頁面負擔。 05/14 21:42
→ TonyQ:真是長見識了。:) 05/14 21:42
→ TonyQ:對這些新出來的函式果然還是要多點熱情回去看source，不能只 05/14 21:43
→ TonyQ:看官方文件...(汗 05/14 21:43
推 wxyy:其實剛剛我還在疑惑 他的 live 範例 跟你寫的 有什麼區別... 05/14 23:59
→ wxyy:後來突然想到我自己就把答案說出來了.... 05/15 00:00
→ wxyy:他在 $('td', this) 有丟 this(就是 table 本身) 05/15 00:01
→ wxyy:所以他把 live 寫的那麼多的確是有用意的... 05/15 00:03
→ wxyy:反應慢了好幾的小時....Orz 05/15 00:03
推 tomin:長知識+1 多給個selector縮小搜尋範圍 會跑比較快也合理 05/15 01:01
→ TonyQ:不，文中的live跟我的live的確是等價的。 05/15 03:55
→ TonyQ:找個有空的時間來追追事件binding的底層在對這件事情討論 05/15 04:02
推 wxyy:先說一下 看過文件說明之後 我自己的認為....為什麼不等價 05/15 07:07
→ wxyy:TonyQ 的 code, event 應該是綁在 document 05/15 07:08
→ wxyy:jQuery Doc 的 code, event 應該是綁在 table 這個 element 05/15 07:08
推 wxyy:所以在效率上是不等價的 只有行為上等價... 05/15 07:12
→ wxyy:當然 以上是我自己翻過文件說明後的 認為... 05/15 07:13
→ TonyQ:live一律都是綁在 document的... 05/15 07:25
→ TonyQ:ok 我看錯code了 XD 05/15 07:26
→ TonyQ:的確不等價。 sorry 05/15 07:26
推 othree:其實我還不太信任 jQuery 的 live 就是因為他全綁在最上層 05/15 11:35
推 wxyy:這句話感覺怪怪的 你要是一開始的 selector 有第二參數的話 05/15 13:23
→ wxyy:那他就是綁在 parent node 了...跟信不信任 live 沒關係吧!!? 05/15 13:24
→ TonyQ:應該是，我要找時間重新釐清一下jquery的binding source.. 05/16 22:46