jQuery中绑定事件时bind和on的区别
作者：
秒速五厘米
文章简介：
jQuery中绑定事件时bind和on的区别
jquery的bind跟on绑定事件的区别：主要是事件冒泡；
jquery文档中bind和on函数绑定事件的用法：
.bind(events [,eventData], handler) .on(events [,selector] [,data], handler)
.on方法比.bind方法多一个参数selector，.on的selector参数是筛选出调用.on方法的dom元素的指定子元素，由于JavaScript的事件冒泡特性，如果我们在父元素上注册了一个事件处理函数，当子元素上发生这个事件的时候，父元素上的事件处理函数也会被触发。如果使用on的时候，不设置selector，那么on与bind就没有区别了。
请看如下代码：
<ul> <li id="li1">1</li> <li id="li2">2</li> </ul>
当没有selector时使用.bind和.on：
$('ul').bind('click', function () { // 等同于$('ul').on('click', function () {
console.log($(this).text());
});那么结果为：
当有selector时，
$('ul').on('click','#li1', function () {
console.log($(this).text());
});点击1显示1，点击2就没有反应了
还有一点，on绑定的事件处理函数，对于未来新增的元素一样可以，但是bind就不行，看下面的代码：
$('ul').on('click','li', function () {
console.log($(this).text());
});
$('ul').append('<li>3<li>')；此时，点击3可以显示出3；
$('ul li').bind('click', function () {
console.log($(this).text());
});
$('ul').append('<li>3<li>')；此时，点击3就显示不出来了