JQuery的delegate()方法是给页面里的元素(或者页面里未来将会有的元素)绑定事件，同样的从结果来看JQuery的bind()方法同样也是给元素绑定事件，但是它(bind)只能给页面中当前已经存在的元素去绑定事件。
JQuery的live()方法同样也是给元素绑定事件，但是它(live)在页面有改动的时候，JQuery把相应函数绑定到$(document)元素上。任何时候只要有事件冒泡到document节点上，它就查看该事件是否是一个绑定事件，以及该事件的目标元素与这一选择器是否匹配，如果都是的话，则执行函数。JQuery 1.7以后就不支持live()了。
JQuery的on()方法同样也是给元素绑定事件，它(on)是整合了之前的三种方式的新事件绑定机制。
例子：
<html> <head> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").delegate("p","click",function(){ $(this).slideToggle(); }); $("button").click(function(){ $("<p>这是一个新段落。</p>").insertAfter("button"); }); }); </script> </head> <body> <div > <p>这是一个段落。</p> <p>请点击任意一个 p 元素，它会消失。包括本段落。</p> <button>在本按钮后面插入一个新的 p 元素</button> </div> <p><b>注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p> </body> </html> |
标红的P是通过点击button才能被加载到页面的，也就是说，在document.ready的时候页面里还没有这个P元素，所以说需要用delegate()方法给P绑定事件，此时用click()或者bind()是做不到给可能被加载到这个页面的P元素绑定事件的。
但是这个button是页面中已经存在的，用click就可以给绑定上事件。当然了，用delegate()也行。
为什么选择.live()或.delegate()而不是.bind()
毕竟，bind看起来似乎更加的明确和直接，难道不是吗?嗯，有两个原因让我们更愿意选择delegate或live而不是bind：
1. 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。
2. 如果你运行了$('a').bind(…)，而后新的链接经由AJAX加入到了页面中，则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上，因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
3. 或者为了把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上，这种做法带来了性能上的好处。
共同学习，写下你的评论
评论加载中...
作者其他优质文章
