作者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
2F:→ wxyy:依照上面网址最後提到的 如果开头的selector没第二个参数 05/14 21:19
3F:→ wxyy:那用 .delegate() 效率会比较好.. 05/14 21:19
5F:→ wxyy:如果需要 chain method call 也只能用 .delegate() 05/14 21:21
6F:→ TonyQ:我倒是没注意到他是把事件bind到context这件事,这样说的话 05/14 21:42
7F:→ TonyQ:他效率的确会比较好,而且也可以减少页面负担。 05/14 21:42
8F:→ TonyQ:真是长见识了。:) 05/14 21:42
9F:→ TonyQ:对这些新出来的函式果然还是要多点热情回去看source,不能只 05/14 21:43
10F:→ TonyQ:看官方文件...(汗 05/14 21:43
11F:推 wxyy:其实刚刚我还在疑惑 他的 live 范例 跟你写的 有什麽区别... 05/14 23:59
12F:→ wxyy:後来突然想到我自己就把答案说出来了.... 05/15 00:00
13F:→ wxyy:他在 $('td', this) 有丢 this(就是 table 本身) 05/15 00:01
14F:→ wxyy:所以他把 live 写的那麽多的确是有用意的... 05/15 00:03
15F:→ wxyy:反应慢了好几的小时....Orz 05/15 00:03
16F:推 tomin:长知识+1 多给个selector缩小搜寻范围 会跑比较快也合理 05/15 01:01
17F:→ TonyQ:不,文中的live跟我的live的确是等价的。 05/15 03:55
18F:→ TonyQ:找个有空的时间来追追事件binding的底层在对这件事情讨论 05/15 04:02
19F:推 wxyy:先说一下 看过文件说明之後 我自己的认为....为什麽不等价 05/15 07:07
20F:→ wxyy:TonyQ 的 code, event 应该是绑在 document 05/15 07:08
21F:→ wxyy:jQuery Doc 的 code, event 应该是绑在 table 这个 element 05/15 07:08
22F:推 wxyy:所以在效率上是不等价的 只有行为上等价... 05/15 07:12
23F:→ wxyy:当然 以上是我自己翻过文件说明後的 认为... 05/15 07:13
24F:→ TonyQ:live一律都是绑在 document的... 05/15 07:25
25F:→ TonyQ:ok 我看错code了 XD 05/15 07:26
26F:→ TonyQ:的确不等价。 sorry 05/15 07:26
27F:推 othree:其实我还不太信任 jQuery 的 live 就是因为他全绑在最上层 05/15 11:35
28F:推 wxyy:这句话感觉怪怪的 你要是一开始的 selector 有第二参数的话 05/15 13:23
29F:→ wxyy:那他就是绑在 parent node 了...跟信不信任 live 没关系吧!!? 05/15 13:24
30F:→ TonyQ:应该是,我要找时间重新厘清一下jquery的binding source.. 05/16 22:46