Jquery中的事件委托bind,live,delegate,on的区别

bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；

bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；

live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些。

on()方法绑定事件可以提升效率

on()方法可以绑定动态添加到页面元素的事件

 

bind:把事件绑定到每一个匹配的元素上，主要特点

1、兼容性好

2、只能给已经添加的元素绑定事件，不能给未来存在的元素绑定

3、当元素很多时，会出现效率问题

 

事件委托：

live:是用事件委托的概念来执行，但是是把事件委托给document,主要特点：

1、事件只需要绑定一次，不需要绑定到筛选出来的元素上。

2、动态添加元素后依然有绑定事件。

3、不能使用event.stopPropagation()来阻止事件冒泡

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
$('li').live('click',function(ev){
    var target=ev.target||ev.srcElement;
    alert(target.innerText);
})

 

delegate:将事件绑定到指定的父元素上，和live类似，但比较灵活。主要特点是：

1、可以用在动态添加的元素上

2、绑定的父元素可以采用就近原则，减少查询次数。

3、在live和delegate两者中推荐使用后者。

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
$('ul').delegate('li','click',function(ev){
    var target=ev.target||ev.srcElement;
    alert(target.innerText);
})