简介
最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使用它们啊。下面本文将给大家详细介绍这四个方法之间的区别,分别对每个方法都进行了详细的介绍,话不多说,来一起看看详细的介绍:
在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使用的样本。
<ul id="members" data-role="listview" data-filter="true">
<!-- ... 其他li ... -->
<li>
<a href="detail.html?id=10" rel="external nofollow" >
<h3>John Resig</h3>
<p><strong>jQuery Core Lead</strong></p>
<p>Boston, United States</p>
</a>
</li>
<!-- ... 其他li ... -->
</ul>使用Bind方法
.bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。这个方法被使用得最久,在此期间,它很好的解决了各种跨浏览器的问题。当使用它来连接事件处理函数时,它仍然非常简洁,但是也存在着一些性能方面的问题,将在下面罗列出来。
/* .bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。
.click() 方法只是.bind() 方法的简写。
*/$( "#members li a" ).bind( "click", function( e ) {} );
$( "#members li a" ).click( function( e ) {} );
.bind()方法将会把事件处理函数连接到所有匹配的a标签。这种方式并不好。这样做的话,它不仅在所有匹配的元素中隐含地迭代附加事件处理函数,而且这些操作非常浪费(多余),因为这些相同的事件处理函数是被一遍一遍的重复的添加到所有匹配的标签上。优点:
适用于各种浏览器
连接事件处理函数非常方便快捷
可以使用
.click() ,
.hover()等简写方法来更方面地连接事件处理函数对于一个简单的ID选择器,使用
.bind() 方法不仅可以很快地连接事件处理函数,而且当事件被触发时, 事件处理函数几乎是马上就被调用了缺点:
这样方法会将所有的事件处理函数附加到所有匹配的元素
不可以动态地匹配相同选择器的元素
当操作大量匹配的元素时会有性能方面的问题
附加操作是在前期完成的,这可能导致页面加载时存在性能问题










