Jquery中事件的绑定和解除

最新推荐文章于 2022-10-12 11:47:36 发布

原创最新推荐文章于 2022-10-12 11:47:36 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

Jquery学习专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了使用jQuery进行事件绑定的方法，包括.on()用于可重复触发事件、.one()用于仅触发一次的事件绑定，以及如何通过.trigger()手动触发事件。此外还展示了如何使用.off()来解除事件绑定。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.div{
				background-color: #0000FF;
				align-content: center;
				width:100px;
				height: 200px;
			}
		</style>
		<script src="js/jquery-1.12.1.js"></script>
		<script>
			console.info("this1： " + this);
			$(function() {
				console.info("this2：" + this);
				//on代表可重复触发事件，如果对同一个元素同一个事件进行多次绑定，则会按照绑定的顺序执行
				$(".div").on("mouseover", function(){
					console.info("(this)3: " + this);
					console.info("$(this)3: " + $(this));
					$(this).css("background-color", "#FFA500");
				});
				//one代表一次触发事件（表单提交）
				$("button").one("click", function(){
					alert("数据已经提交");
				});
				//当输入框中长度=6时，自动提交
				$("input").on("keyup", function(){
					console.info($(this));
					var v = $(this).val();
					console.info(v);
					if(v.length == 6){
						//trigger触发元素绑定上的事件,因为button上绑定一次性提交事件，故只会提交一次
						$("button").trigger("click");
					}
				});
				//利用off解除事件绑定,和on对应
				//1、解除所有组件的事件绑定
				//$("*").off("click");
				$("*").off();//如果没有参数，则接触元素所有的事件
			});
			
		</script>
	</head>

	<body>
	<div class="div">
		<input type="text" />
		<button>提交</button>
	</div>
	</body>

</html>