随想飞翔

邪恶获得胜利的唯一条件,就是善良的人们保持沉默。

« 关于明月星光|CloudreamjQuery 1.3 & jQuery UI »

JavaScript delegate

本文内容基于 jQuery 框架。

很多时候,在网页中插入新DOM对象后,需要在这些对象上绑定一些事件,当频繁使用AJAX来修改页面内容时,为新对象绑定事件就成了一件极为麻烦的事情。

解决方案1:LiveQuery


LiveQuery监控jQuery的修改DOM对象的事件,如append,prepend,并且每20毫秒检查一次,当DOM树改变时,重新检索所需元素来绑定事件。特点是使用起来简单,符合 对象-事件 对应的心智模型。当然代价也是相当巨大,选择符复杂时,或者监控多个选择符时,浏览器就会在不停的检查DOM对象是否改变。而且通过其它方式修改DOM树时(如.html(code)?)不会为新对象绑定事件。当然如果所有浏览器都支持DOMNodeInserted事件那么就无需定时检测了。

解决方案2:Delegate


Delegate的原理是利用JS事件冒泡的特性,在所需绑定事件A的元素的父元素(或更上层)上绑定相同触发条件的事件B,在事件B中检测事件的原触发对象是否是需要执行事件A的元素,如是,则执行事件A。特点是高效(在所有浏览器支持DOMNodeInserted前),问题是,需要将事件绑定到父元素上,增加代码的复杂程度。

演示: http://labs.cloudream.name/jquery/delegate/

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

日历

最新评论及回复

最近发表

Powered By Z-Blog

Copyright 明月星光(Cloudream). Some Rights Reserved. 转载请在明显位置链接本站