jQuery 事件总结

最新推荐文章于 2020-07-20 07:15:00 发布

梦忆长安

最新推荐文章于 2020-07-20 07:15:00 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/qq_44971038/article/details/103311874

版权

bind()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div>
			<input type="button" value="按钮" />
		</div>
		<script>
			$("[type='button'").bind("click",function(){
				console.log("I Love Long");
			})
		</script>
	</body>
</html>

绑定一个事件，有两个参数，前一个参数是事件的类型，后一个参数是触发事件的方法；

unbind()

解除绑定的事件，该方法可以将已绑定的事件解除掉，只有一个参数--已绑定事件的事件类型；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div>
			<input type="button" value="按钮" />
		</div>
		<script>
			$("[type='button'").bind("click",function(){
				console.log("I Love Long");
			})
			$("[type='button']").unbind("click");
		</script>
	</body>
</html>

one()

该方法绑定的事件只会触发一次，触发之后便自动解除绑定，不会再触发；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<div>
			<input type="button" value="按钮" />
		</div>
		<script>
			$("[type='button']").one("click",function(){
				console.log("I Love Long");
			})
		</script>
	</body>
</html>

点击多次按钮，我们会发现控制台的输出仅触发一次；

trigger()

trigger()方法不同于其他事件绑定的方法，该方法是触发器，触发事件，先看一个例子；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="search" action="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
		</form>
		<script>
			$(window).keydown(function(){
				if(event.keyCode==13){
					$("#search").trigger("submit");
				}
			})
		</script>
	</body>
</html>

定义一个表单并定义一个隐藏框，隐藏框里定义的作用是在表单跳转到百度首页后输入“中国”并进行搜索；在script标签中定义一个方法，当键盘输入enter时进行跳转百度首页；其中跳转需要的提交过程由trigger触发器触发；