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

最新推荐文章于 2021-10-27 22:35:26 发布

吴声子夜歌

最新推荐文章于 2021-10-27 22:35:26 发布

阅读量1.4k

点赞数 7

分类专栏： jQuery 文章标签： jQuery 事件绑定 bind() one() toggle()

本文链接：https://blog.csdn.net/cold___play/article/details/101875578

版权

jQuery 专栏收录该内容

30 篇文章 2 订阅

订阅专栏

事件绑定

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