所谓事件绑定，是指将页面元素的事件类型与事件处理函数关联到一起，当事件触发时调用事件绑定的事件处理函数。在jQuery中，提供了强大的API来执行事件的绑定操作，如bing()、one()、toggle()、live()、delegate()、on()和hover()等。
1. bind()方法： bind()方法用于对匹配元素的特定事件绑定的事件处理函数，语法格式如下：
bing(types, [data],fn) type：表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开，事件类型包括鼠标事件或键盘事件，鼠标时间包括click、submit、mouseover和mouseup等，键盘事件包括keydown和keyup等data（可选）：表示传递给函数的额外数据，在事件处理函数中通过event.data来获得传入的额外数据fn：表示所绑定的事件按处理函数示例：
//绑定事件 $("#bindBtn").bind("click", function(){ $("#rightDiv").text("使用bind()方法绑定事件处理"); }); //为一个对象同时绑定mouseenter和mouseleave事件 $("#bindBtn2").bind("mouseenter mouseleave",function(){ $(this).toggleClass("entered"); }); //为一个对象同时绑定多个事件，且每个事件具有单独的处理函数 $("#manyBindBtn").bind({ click:function(){$("#rightDiv").slideToggle();}, mouseover:function(){$("#rightDiv").css("background-color","red");}, mouseout:function(){$("#rightDiv").css("background-color","yellow");} });jQuery为常用的事件（如click、mouseover和mouseout等）提供了一种简写方式，与bind()方法实现的效果完全相同
$("#shortBindBtn").click(function(){ $("#rightDiv").text("事件绑定缩写方式实现"); });2. one()方法： one()方法用于对匹配元素的特定事件绑定一个一次性的事件处理函数，事件处理函数只会被执行一次。语法格式如下：
one(types,[data],fn) types：表示事件类型，是一个或多个事件类型构成的字符串，类型之间由空格隔开data（可选）：表示传递给函数的额外数据，在事件处理函数中通过event.data来获得传入的额外数据fn：表示所绑定的事件按处理函数示例：
$("#rightDiv").one("click", function(){ alert($(this).text()); });3. toggle()方法（1.9版本之前）： toggle()方法用于模拟鼠标连续单击事件，语法格式如下：
toggle(([speed],[easing],[fn1,fn2,fn3,...,fnN])) speed：用于设置元素的隐藏（或显示速度），默认是0ms，取值范围是slow、normal、fast或毫秒数easing：用于指定动画的切换效果，取值是swing（默认）和linearfn1,fn2,fn3,…,fnN：表示1~n个事件处理函数。fn1表示第一次单击时的处理函数，fn2表示第二次单击时的处理函数等等同时具有参数speed、fn时，表示以speed速度显示或隐藏，在动画完成后执行fn事件处理函数示例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery基本操作事件绑定</title> <script type="text/javascript" src="js/jquery-1.x.js"> </script> <script type="text/javascript" src="js/jquery-migrate-1.2.1.js"> </script> <style type="text/css"> div{width:200px;height:200px;border:1px solid #666;} #leftDiv{float:left; margin:0 auto;} #rightDiv{float:right;} .entered{background-color:#66F;} </style> </head> <body> <div id="leftDiv"> <input type="button" value="bind事件绑定" id="bindBtn"/> <input type="button" value="一次绑定两个事件" id="bindBtn2"/> <input type="button" value="多事件绑定" id="manyBindBtn"/> <input type="button" value="事件绑定缩写方式" id="shortBindBtn"/> <input type="button" value="toggle()多形式事件" id="toggleBtn"/> <input type="button" value="toggle()动画事件" id="toggleAnimateBtn"/> </div> <div id="rightDiv">右侧展示区</div> <script type="text/javascript"> $(function(){ //绑定事件 $("#bindBtn").bind("click", function(){ $("#rightDiv").text("使用bind()方法绑定事件处理"); }); //为一个对象同时绑定mouseenter和mouseleave事件 $("#bindBtn2").bind("mouseenter mouseleave",function(){ $(this).toggleClass("entered"); }); //为一个对象同时绑定多个事件，且每个事件具有单独的处理函数 $("#manyBindBtn").bind({ click:function(){$("#rightDiv").slideToggle();}, mouseover:function(){$("#rightDiv").css("background-color","red");}, mouseout:function(){$("#rightDiv").css("background-color","yellow");} }); //事件绑定的缩写形式 $("#shortBindBtn").click(function(){ $("#rightDiv").text("事件绑定缩写方式实现"); }); //one()方式绑定一次性事件 $("#rightDiv").one("click", function(){ alert($(this).text()); }); //模拟连续多次单击事件 $("#toggleBtn").toggle(function(){ $(this).css("background-color","red"); },function(){ $(this).css("background-color","green"); },function(){ $(this).css("background-color","yellow"); },function(){ $(this).css("background-color","white"); } ); //动画效果结束后，再事件调用处理函数 $("#toggleAnimateBtn").click(function(){ //$("#newsContent").toggle(10000); $("#rightDiv").toggle("slow","swing",function(){ $("#toggleAnimateBtn").css("background-color","red"); }); }); }); </script> </body> </html>