jQuery中的事件（八）：on()、off()、bind()、unbind()、one()、hover()、hide()、show()、offset()等

81 阅读 0 评论 54 点赞

我是靠谱客的博主冷静手机，这篇文章主要介绍jQuery中的事件（八）：on()、off()、bind()、unbind()、one()、hover()、hide()、show()、offset()等，现在分享给大家，希望可以做个参考。

复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>事件</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei"
    	}
    	.cGreen{color: #4CA902}
    	.cPink{color: #ED4A9F}
    	.cBlue{color: #0092E7}
    	.cCyan{color: #01A6A2}
    	.cYellow{color: #DCA112}
    	.cRed{color: #B7103B}
    	.cPurple{color: #792F7C}
    	.cBlack{color: #110F10}
    	.cOrange{color: #FF4500}
    	.cGray{color: #A9A9A9}
    	.hide{display: none;}
    	div {
    		width:100%;
    		text-align: center;
    	}
    	span {
    		border:solid 1px #A9A9A9;
    		padding:10px;
    		text-align: center;
    	}
    	.hoverCls{
    		color:#FF4500;
    		border:solid 1px #FF4500;
    	}
    </style>
    <script type="text/javascript">
    	$(document).ready(function() {
    		/* 
    		事件绑定与取消绑定：
    		on()：在选择元素上绑定一个或者多个事件处理函数！
    		$("p").on("click", function() {
    			alert($(this).text());
    		});
    		off()：在选择元素上移除一个或多个事件处理函数。
    		off()方法移除用.on()绑定的事件处理程序。
    		$("p").off("click", "**");
    		*/
    		// <input type="button" id="btn1" value="on()点击图片弹出信息">
    		// on：绑定一个事件。
    	    $("#btn1").click(function() {
				$("img").on("click", function() {
					alert("图片被点击了！");
				});
			});
    	    
    		// <input type="button" id="btn2" value="off()取消图片的点击事件">
    	    // off()：有参数就删除特定的事件，没有参数删除这个标签的所有事件。
    		$("#btn2").click(function() {
				$("img").off("click");
			});
    	    
    		// <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
    	    // 
    		$("#btn3").click(function() {
				// 绑定鼠标在文档中的移动事件，对整个文档进行绑定
				$(document).bind("mousemove", function(e) {
					// 获取当前鼠标的位置
					// 设置显示位置
					$("span:eq(1)").html(e.pageX+", "+e.pageY);
				});
			});
    	    
    		// <input type="button" id="btn4" value="unbind()取消bind绑定的事件">
    	    $("#btn4").click(function() {
				// 取消
				$(document).unbind("mousemove");
				
			});
    	    
    		// <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
    	    $("#btn5").click(function() {
				// 只点击一次
				$("img").one("click", function() {
					alert("弹出框只会第一次点击弹出！");
				});
			});
    		
    		// <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
    	    $("#btn6").click(function() {
				$("span:first").hover(
				function() {
					// mouseover鼠标放在上面的时候
					// 1.1 隐藏图片
					$("img").hide();
					// 1.2 修改span元素的样式：加个假高亮
					$(this).addClass("hoverCls");
				}, function() {
					// 鼠标移开的时候
					// 2.1 显示图片
					$("img").show();
					
					// 把span的样式修改回来
					$(this).removeClass("hoverCls");
				});
			});
    	    
    		// <input type="button" id="btn7" value="如影随形">
    	    $("#btn7").click(function() {
				// 绑定鼠标在整个文档中的移动事件
				$(document).bind(
				"mousemove", function(e) {
					$("img").offset({
						"left":e.pageX, "top":e.pageY
					});
				});
			});
    	    
    		/*
    		给所有div注册一个点击事件，
    		用于测试产生的事件冒泡！
    	    */
    		$("div").click(function() {
				alert("触发div点击事件");
			});
    	    
    		// <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
			$("#btn8").click(function() {
				$("img").on("click", function() {
					alert("图片被点击了。");
					return false;
				});	
			});
    	    
		});
    </script>
    
  </head>
  
  <body>
  	<div>
  		<br>
  		<span>鼠标放上来图片不显示，鼠标移开图片再次显示</span>
  		<br><br>
  		<img alt="itcast" src="logo.png">
  		<br><br>
  		鼠标的相对位置为：<span style="border:0px;"></span>
  	</div>
    <div style="clear:both;"></div>
    <br><br>
    <hr>
    <input type="button" id="btn1" value="on()点击图片弹出信息">
    <input type="button" id="btn2" value="off()取消图片的点击事件">
    <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
    <input type="button" id="btn4" value="unbind()取消bind绑定的事件">
    <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
    <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
    <input type="button" id="btn7" value="如影随形">
    <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>事件</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei"
    	}
    	.cGreen{color: #4CA902}
    	.cPink{color: #ED4A9F}
    	.cBlue{color: #0092E7}
    	.cCyan{color: #01A6A2}
    	.cYellow{color: #DCA112}
    	.cRed{color: #B7103B}
    	.cPurple{color: #792F7C}
    	.cBlack{color: #110F10}
    	.cOrange{color: #FF4500}
    	.cGray{color: #A9A9A9}
    	.hide{display: none;}
    	div {
    		width:100%;
    		text-align: center;
    	}
    	span {
    		border:solid 1px #A9A9A9;
    		padding:10px;
    		text-align: center;
    	}
    	.hoverCls{
    		color:#FF4500;
    		border:solid 1px #FF4500;
    	}
    </style>
    <script type="text/javascript">
    	$(document).ready(function() {
    		/* 
    		事件绑定与取消绑定：
    		on()：在选择元素上绑定一个或者多个事件处理函数！
    		$("p").on("click", function() {
    			alert($(this).text());
    		});
    		off()：在选择元素上移除一个或多个事件处理函数。
    		off()方法移除用.on()绑定的事件处理程序。
    		$("p").off("click", "**");
    		*/
    		// <input type="button" id="btn1" value="on()点击图片弹出信息">
    		// on：绑定一个事件。
    	    $("#btn1").click(function() {
				$("img").on("click", function() {
					alert("图片被点击了！");
				});
			});
    	    
    		// <input type="button" id="btn2" value="off()取消图片的点击事件">
    	    // off()：有参数就删除特定的事件，没有参数删除这个标签的所有事件。
    		$("#btn2").click(function() {
				$("img").off("click");
			});
    	    
    		// <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
    	    // 
    		$("#btn3").click(function() {
				// 绑定鼠标在文档中的移动事件，对整个文档进行绑定
				$(document).bind("mousemove", function(e) {
					// 获取当前鼠标的位置
					// 设置显示位置
					$("span:eq(1)").html(e.pageX+", "+e.pageY);
				});
			});
    	    
    		// <input type="button" id="btn4" value="unbind()取消bind绑定的事件">
    	    $("#btn4").click(function() {
				// 取消
				$(document).unbind("mousemove");
				
			});
    	    
    		// <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
    	    $("#btn5").click(function() {
				// 只点击一次
				$("img").one("click", function() {
					alert("弹出框只会第一次点击弹出！");
				});
			});
    		
    		// <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
    	    $("#btn6").click(function() {
				$("span:first").hover(
				function() {
					// mouseover鼠标放在上面的时候
					// 1.1 隐藏图片
					$("img").hide();
					// 1.2 修改span元素的样式：加个假高亮
					$(this).addClass("hoverCls");
				}, function() {
					// 鼠标移开的时候
					// 2.1 显示图片
					$("img").show();
					
					// 把span的样式修改回来
					$(this).removeClass("hoverCls");
				});
			});
    	    
    		// <input type="button" id="btn7" value="如影随形">
    	    $("#btn7").click(function() {
				// 绑定鼠标在整个文档中的移动事件
				$(document).bind(
				"mousemove", function(e) {
					$("img").offset({
						"left":e.pageX, "top":e.pageY
					});
				});
			});
    	    
    		/*
    		给所有div注册一个点击事件，
    		用于测试产生的事件冒泡！
    	    */
    		$("div").click(function() {
				alert("触发div点击事件");
			});
    	    
    		// <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
			$("#btn8").click(function() {
				$("img").on("click", function() {
					alert("图片被点击了。");
					return false;
				});	
			});
    	    
		});
    </script>
    
  </head>
  
  <body>
  	<div>
  		<br>
  		<span>鼠标放上来图片不显示，鼠标移开图片再次显示</span>
  		<br><br>
  		<img alt="itcast" src="logo.png">
  		<br><br>
  		鼠标的相对位置为：<span style="border:0px;"></span>
  	</div>
    <div style="clear:both;"></div>
    <br><br>
    <hr>
    <input type="button" id="btn1" value="on()点击图片弹出信息">
    <input type="button" id="btn2" value="off()取消图片的点击事件">
    <input type="button" id="btn3" value="bind()绑定document的鼠标移动事件并显示鼠标相对位置">
    <input type="button" id="btn4" value="unbind()取消bind绑定的事件">
    <input type="button" id="btn5" value="one()为图片绑定一个一次性的点击事件弹出信息">
    <input type="button" id="btn6" value="hover()实现 鼠标放上来图片不显示，鼠标移开图片再次显示">
    <input type="button" id="btn7" value="如影随形">
    <input type="button" id="btn8" value="事件冒泡，点击span后div也被触发点击">
  </body>
</html>