每一个学习Javascript的程序猿，都对jQuery不陌生。因为在工作中，如果用原生的JS和DOM来编写代码，会显得代码冗余。而jQuery的出现却很好的解决了这个问题。原来书长很长的代码，现在只需几行便可轻松解决。
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
在学习jQuery库时，我们会遇到on()和bind()两种给对象绑定事件处理函数的方法。
bind()--为jQuery对象内含元素添加一个或多个事件处理函数，有以下一些形式。
1.bind(eventType, function)——其中eventType为事件类型，function为事件类型触发时，执行的代码块。
example:
$("button").bind('click',function(){
console.log("hello world");
});
2.bind(eventType, data, function)——为jQuery对象内含元素添加一个事件处理函数，支持可选的data参数。
example:
var handler = function(e){
$(this).css("border","1px solid "+e.data)；
};
$("img").bind('mouseenter','blue',handler).bind('mouseout','red',handler)；
鼠标移入图片时加上1像素蓝色的边框，鼠标移出图片时加上1像素红色的边框。
3.bind(eventType, function)，当所选对象对应多个事件处理函数时，可以通过事件处理函数的事件类型e.type进行区分。下面这种写法和上段代码效果是一样的。
example:
var handler = function(e) {
if(e.type == 'mouseenter') {
$(this).css("border", "1px solid blue");
} else {
$(this).css("border", "1px solid red")
};
};
$("img").bind('mouseenter mouseout', handler);
4.bind(map)——使用JavaScript对象字面量map为jQuery对象内含元素一次添加多个事件处理函数。
example:
var myHandler ={
'mouseenter':function(){console.log("我是鼠标进入")},
'click':function(){console.log("我是鼠标点击")},
'mouseout':function(){console.log("我是鼠标出来")}
}；
$("img").bind(myHandler);
但是在实际开发工作中，人们往往更倾向于使用on()方法为对象添加事件处理函数，因为bind方法绑定的事件处理函数不会应用到后来添加到DOM中的新元素上。通俗的说，就是比如原来的图片已经添加上事件了，后来通过DOM操作创建出来的图片不会享有此事件。
on()——支持自动绑定事件处理函数的方法，常用方法有以下两种形式。
1.on(events，[selector]，[data]，function)——其中[]括号中的参数是可选的。events:一个或多个用空格分隔的事件类型和可选的命名空间。selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。
example:
$("button").on('click',function(){
console.log("hello world");
});
2.on(map,[selector], [data]):其中map为事件对象，可以包含一个或多个事件类型。
example:
var map = {
'mouseenter':function(){
$(this).css("border","1px solid red");
},
'mouseout':function(){
$(this).css("border","none");
}
}
$(document).on(map,'img');
通过对比，可以看出.on方法比.bind方法多一个参数'selector',那么这个selector参数的好处是什么?好处就在于.on方法能够动态地为添加的元素也能绑上指定事件。例如通过on（map,'img'）这种方法为图片绑定的事件，即使是后来创建出来的图片对象，也会享有此事件处理函数。
—— newArray
浅谈jQuery中的on()和bind()两中函数的区别
网友评论