jQuery的bind和on绑定事件的区别

小灰灰 2022-05-15 10:23 239阅读 0赞

> 转载博主：[https://www.cnblogs.com/Toby-hou/p/7927675.html][https_www.cnblogs.com_Toby-hou_p_7927675.html]  
> 我只是对博主的文章语序和样式改了下，总体思路没变：

# jQuery的bind和on绑定事件的区别：主要是事件冒泡 #

jQuery文档中bind和on函数绑定事件的用法：

xxx.bind(events [,eventData], handler)
    
    xxx.on(events [,selector]  [,data], handler)

从文档中可以看出，.on方法比bind方法多一个参数**‘selector’**

on方法的selector参数是筛选出调用xxx.on方法的dom元素的指定**子元素**，如：

$('ul').on('click', 'li', function(){   //就是筛选出ul下的li给其绑定click事件
        console.log('click');
    })

那么这个selector参数的好处是什么?

好处在于.on方法

原理是事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理；

这样的好处

**1.万一子元素非常多，给每个子元素都添加一个事件，会影响到性能；**

**2.为动态添加的元素也能绑上指定事件；**

如：

$('ul li').on('click', function(){ 		$('ul li').bind('click', function(){ 
        console.log('click');           的绑定方式和     console.log('click');              是一样的
    })                                                })
    
    
    通过js给ul添加了一个li：$('ul').append('<li>js new li<li>');
    这个新加的li使用bind方法是不会被绑上click事件的
    但是用
    $('ul').on('click', 'li', function(){ 
    console.log('click');
    }
    方式绑定，可以动态绑定上这个新生成的li的click事件。

[https_www.cnblogs.com_Toby-hou_p_7927675.html]: https://www.cnblogs.com/Toby-hou/p/7927675.html