jQuery中bind和on的区别

一、bind用法

bind有三个参数，分别是event，data，function，也就是事件，额外要添加的数据以及执行函数：
$(‘元素’).bind(event,data,function(){})

HTML

	<!-- 这是一个按钮 -->
	<button class="btn">btn</button>

JS代码

		//当鼠标点击按钮时，控制台打印“点击了”
		$('.btn').bind('click',function(){
            console.log('点击了');
        }) 

二、on用法

on有四个参数，分别是event，selector, data，function 分别是事件，选择器，额外添加的数据和执行函数。
$(‘元素’).on(event, selector, data, function(){})
on方法可以给指定的子元素绑定事件

HTML

	<ul>
        <li>第一个子元素</li>
        <li>第二个子元素</li>
        <li>第三个子元素</li>
    </ul>

JS代码

		//当鼠标点击ul下面的li时，控制台打印“点击了”
		$('ul').on('click','li',function(){
            console.log('点击了');
        }) 

三、bind和on的区别

1. on比bind多一个selector参数,可以给子元素添加事件. bind 只能给自己添加事件。
2. 对于新添加的元素如果是on绑定,符合条件的新元素也会绑定事件,bind则不影响新元素。
3. on会产生事件冒泡，bind不会。
   注意：一般on的使用比bind更频繁，bind从某个版本开始就不推荐使用的。