jQuery的on与bind绑定事件的区别与注意事项

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

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

$(selector).bind(events,data,function)

$(selector).bind(map,data)

$(selector).on(event,childSelector,data,function)

$(selector).on(map,childSelector,data)

event：

必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值。必须是有效的事件。

childSelector

可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。

data

可选。规定传递到函数的额外数据。

function

可选。规定当事件发生时运行的函数。

map 不能与function共存 规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

从文档中可以看出，.on方法比.bind方法多一个参数'childSelector' .on的childSelector参数是筛选出调用.on方法的dom元素的指定子元素，如： $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件； 那么这个childSelector参数的好处是什么? 好处在于.on方法 原理是事件冒泡，进行事件委托，子元素把事件委托给父元素进行事件处理； 这样的好处  1.如果子元素非常多，给每个子元素都添加一个事件，会影响到性能； 2.为动态添加的元素也能绑上指定事件； 如： $('ul li').on('click', function(){console.log('click');})的绑定方式和$('ul li').bind('click', function(){console.log('click');})一样；我通过js给ul添加了一个li：$('ul').append('<li>我是新创建的li<li>')；')；这个新加的li是不会被绑上click事件的 但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，然后动态添加li:$('ul').append('<li>我是新创建的li<li>');这个新生成的li被绑上了click事件 // bind的两种写法： // 第一： $("ul li").bind("click mouseover",{msg:"你好！"},function(ev){ console.log("我是bind"); console.log(ev.data.msg); }) // 第一： $("ul li").bind({ mouseover:function(){ console.log("我是bind"); }, click:function(ev){ console.log(ev.data.msg); } },{msg:"你好！"}) //注意：data必须放在事件后面才有效果，否则会报错 // on的两种写法： // 第一： $("ul").on("click mouseover","li",{msg:"你好！"},function(ev){ console.log(ev.data.msg); }) // 第二： $("ul ").on({ mouseover:function(ev){ console.log("我是on"); }, click:function(ev){ console.log(ev.data.msg); } },"li",{msg:"你好！"})//注意：data必须放在事件后面才有效果，否则会报错

自jQuery版本1.7起，on()方法是bind()live()和delegate()方法的新的替代品。该方法给API带来很多便利，我们推荐使用该方法它简化了jQuery代码库。