JQuery——事件绑定bind和on的区别

引言

　　通过JQuery对目标对象绑定事件我们大部分都是通过$('选择器').事件名()的形式实现，其实对事件的绑定还可以使用on和bind，为了搞明白两者之间的区别特做记录，以备以后查阅。

正文

　　bind和on都是给元素绑定事件用的,但两者在使用时有些差别，我们最主要关注的就是on是存在 事件冒泡 的。

1、On与Bind的API对比

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

参数	描述
event	必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。
childSelector	可选。规定只能添加到指定的子元素上的事件处理程序（且不是选择器本身，比如已废弃的 delegate() 方法）。
data	可选。规定传递到函数的额外数据。
function	可选。规定当事件发生时运行的函数。

　　$(selector).bind(event,data,function,map)

参数	描述
event	必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。支持的事件有 click,dbclick,change,load,resize,scroll,unload,blur,focus,mousemove,mouseout, mouseup,mousedown,mousemove,mouseenter,mouseleave,select.submit, keydown,keypress,keyup,error...等事件
data	可选。规定传递到函数的额外数据。
function	必需。规定当事件发生时运行的函数。
map	规定事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数。

　　我们知道，javascript的事件冒泡特性，如果在父元素上注册了一个事件处理函数，当子元素上发生这个事件的时候，父元素上的事件处理函数也会被触发。这里通过on进行事件绑定是就支持selector这个参数值，所以On进行绑定可以委托父元素进行事件响应。而bind不支持。bind只能给符合条件的元素本身添加事件，on可以将子元素的事件委托给父元素进行处理,而且可以给动态添加的元素加上绑定事件，即通过JS操作增加的子DOM元素也可以进行事件绑定。

　　JQuery通过on进行事件绑定是jquery1.7及其以上版本开始具有的功能，jquery1.7版本出现之后用于替代bind()，live()绑定事件方式。

　　关于on和bind支持的事件可以参考上表中bind中罗列的内容进行尝试。

——(完)——