jQuery（二）事件绑定方式_$(window).bind-优快云博客

本文链接：https://blog.youkuaiyun.com/ArcsinTao/article/details/107757394

bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数

· type表示事件类型，多个事件类型使用空格分隔

· data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）

· fu表示绑定的函数

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bind(type,[data],fn)</title>
		<script src="js/jquery-1.8.3.js"></script>
		<script>
			$(function() {
				$(window).bind('keydown', function(event) {
					var key = event.which;
					if(key == 13) {
						console.log("Enter键");
					}
				});
			});
		</script>
	</head>
	<body>
	</body>
</html>

· 当绑定不同事件类型绑定不同事件函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bind(type,[data],fn)</title>
		<script src="js/jquery-1.8.3.js"></script>
	</head>
	<body>
		<span>白日依山尽，黄河入海流。</span>
		<script>
			$("span").bind({
				mouseover: function() {
					$("span").css("color", "red");//当鼠标移上去的时候显示为红色
				},
				mouseout: function() {
					$("span").css("color", "blue");//当鼠标移开的时候显示为蓝色
				}
			});
		</script>
	</body>
</html>

unbind(type,[data|fn]])：删除每个匹配的元素上已绑定的事件，如果没有参数，则删除该元素上绑定的所有事件

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>unbind(type,[data|fn]])</title>
		<script src="js/jquery-1.8.3.js"></script>
	</head>
	<body>
		<span>白日依山尽，黄河入海流。</span>
		<script>
			$("span").bind({
				mouseover: function() {
					$("span").css("color", "red");
				},
				mouseout: function() {
					$("span").css("color", "blue");
				}
			});
			
			$("span").unbind("mouseover mouseout");
		</script>
	</body>
</html>

one(type,[data],fn)：该方法可以为元素绑定处理函数，当处理函数触发一次后, 立即被删除，即在每个对象上, 事件处理函数只会被执行一次

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>one(type,[data],fn)</title>
		<script src="js/jquery-1.8.3.js"></script>
	</head>
	<body>
		<input type="button" value="按钮"/>
		<script>
			$("[value='按钮']").one("click", function(){
			  	console.log("仅执行一次");
			});
		</script>
	</body>
</html>

trigger(type,[data])：触发每一个匹配元素上某类事件，type表示一个或多个事件类型， data表示传入函数的数据

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>trigger(type,[data])</title>
		<script src="js/jquery-1.8.3.js"></script>
	</head>
	<body>
		<form id="search" action="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
		</form>
		<script>
			$("#search").trigger("submit");
		</script>
	</body>
</html>