使用jquery对节点绑定事件时,例如绑定click事件,常用的方式有:
(1)$('x').click(function (){});
(2)$('x').delegate('childnode', 'click', function (){});
delegate委托方式是jquery后推出的,而且我们经常可以看到有文章推荐使用delegate,delegate方式相比直接绑定有什么优势呢?
测试
生成一万个 li 节点,对其进行 click 事件绑定,分别使用上面的两种方式,测出各自的执行事件
代码
这里使用php动态生成一万个li
<html>
<body>
<ul>
<?php for($i=0; $i<10000; $i++){?>
<li><?php echo $i; ?></li>
<?php }?>
</ul>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function (){
var st=new Date().getTime();
//方式一
// $('li').click(function (){
// alert(1);
// });
//方式二
// $("ul").delegate("li","click",function(){ alert(1); })
var st2=new Date().getTime() - st;
alert(st2);
});
</script>
</body>
</html>
结果
每种方式执行3次,取平均值
方式一:104毫秒
方式二:2毫秒
可以看到,delegate的性能高效了很多