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

逃离我推掉我的手 2021-08-13 14:22 587阅读 0赞

#### 事件绑定 ####

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: /images/20210813/770811c9a6a844de8b70dd0894054cbd.png