【jQuery】jQuery绑定事件的方法

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

景谦Nice

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

阅读量267

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/qq_43705275/article/details/103306999

版权

jQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

bind(事件类型,方法)：为每个匹配元素的特定事件绑定对应的事件处理方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bind()</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="login" action="http://www.baidu.com">
			<input type="button" value="提交">
		</form>
		<script type="text/javascript">
			function test(){
				alert("提交");
			}
			$("[type='button']").bind("click",test);
		</script>
	</body>
</html>

每次点击“提交”按钮都会出现下面的弹窗提示：
在这里插入图片描述

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>one()</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="login" action="http://www.baidu.com">
			<input type="button" value="提交">
		</form>
		<script type="text/javascript">
			function test(){
				alert("提交");
			}
			$("[type='button']").one("click",test);
		</script>
	</body>
</html>

点击“提交”按钮后会出现下面的弹窗提示，但是再次点击就不会再出现提示窗了：
在这里插入图片描述

click(函数) ：鼠标点击匹配元素时触发click事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>click()</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="login" action="http://www.baidu.com">
			<input type="button" value="提交">
		</form>
		<script type="text/javascript">
			function test(){
				alert("提交");
			}
			$("[type='button']").click(test);
		</script>
	</body>
</html>