jQuery绑定事件的三种方法

最新推荐文章于 2024-05-25 13:36:04 发布

6666，

最新推荐文章于 2024-05-25 13:36:04 发布

阅读量423

点赞数

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/low1101/article/details/103342574

版权

jQuery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了jQuery中绑定事件的三种方法：bind用于常规事件绑定，one确保事件处理函数仅执行一次，而直接设定事件则提供了一种直接设置事件处理方式的选项。了解这些方法有助于更高效地管理DOM元素的事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="button" value="按钮"/>
		<script>
			$("[type='button']").bind("click",function(){
				console.log("按下按钮")
			});
			//bind方法绑定
		</script>
	</body>
</html>

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

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="button" value="按钮"/>
		<script>
			$("[type='button']").one("click",function(){
				console.log("只执行一次按钮")
			});
			//bind方法绑定
		</script>
	</body>
</html>

直接设定事件

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="test" action="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
		</form>
		<script>
			//获取后直接设置时间
			$(window).keydown(function(){
				if(event.keyCode==13){
					$("#test").submit();
				}
			});//这里效果为如果窗口点击enter键，提交表单，跳转到百度搜索界面
		</script>
	</body>
</html>