jQuery--事件绑定（bind()、one()、toggle()）详解-蒲公英云

事件绑定

所谓事件绑定，是指将页面元素的事件类型与事件处理函数关联到一起，当事件触发时调用事件绑定的事件处理函数。在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（默认）和linear
fn1,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>