jQuery绑定事件的方式总结

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

AnFooo

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

阅读量588

点赞数 1

分类专栏： Java Web

本文链接：https://blog.csdn.net/DangerousMc/article/details/103001776

版权

Java Web 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

一.bind()方法绑定事件

首先使用属性选择器获取input标签，然后调用bind方法，传入的第一个参数是要绑定的事件名，第二个参数是事件所调用的函数，这里使用匿名函数作为第二个参数，代码和运行结果如下：

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

这里还有一个取消事件绑定的方法unbind()，调用后之前绑定的事件将不再生效。

二.one()方法绑定事件

one()方法的使用代码与bind()差不多，但是作用上是有差别的，使用one()方法绑定的事件，只能执行一次，也就是说在如下代码中，无论点击按钮多少次，控制台上只会打印一次内容：

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

三.trigger()方法绑定事件

该方法可以触发匹配元素上某类事件，下面的例子以submit举例：

首先使用id选择器获取form标签，再调用trigger()方法为其绑定一个submit事件，这时运行代码就会发现表单直接被提交到百度页面了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<form id="search" action="http://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
		</form>
		<script>
			$("#search").trigger("submit");
		</script>
	</body>
</html>

四.jQuery自带的事件

就像JavaScript中绑定事件一样，jQuery对象也可以和DOM对象一样调用一些自带的事件来绑定，下面举几个常用的事件示例

1.click()方法

先用标签选择器获取input标签，然后调用click()方法绑定事件，函数体作为参数传入方法，示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<input type="button" value="按钮"/>
		<script>
			$("input").click(function(){
				console.log("111");
			});
		</script>
	</body>
</html>

2.change()方法

先用标签选择器获取select标签，然后调用change方法绑定change事件，该事件的触发条件是当下拉列表中发生内容改变时，文本框、密码框和文本域同样也适用，代码和运行结果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<select>
			<option>--请选择--</option>
			<option>--一年级--</option>
			<option>--二年级--</option>
		</select>
		<script>
			$("select").change(function(){
				console.log("111");
			});
		</script>
	</body>
</html>

3.submit()方法

提交表单时触发submit 事件，该事件只适用于表单元素，示例如下，运行后直接跳转到百度页面。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<form id="search" action="http://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
		</form>
		<script>
			$("#search").submit();
		</script>
	</body>
</html>

五.keydown()方法

在如下代码中：

第13行，获取window的jQuery对象，然后调用keydown方法绑定事件，该事件是在键盘按键按下时触发，然后在该事件中传入的函数

第14行，该函数内容为判断按下的键是否为回车event.keyCode就是用来获取按下的键，13就代表回车键的代码

第15行，如果按下的是回车键则触发提交表单事件。

运行结果如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<form id="search" action="http://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>

按下回车键后：

六.事件冒泡

事件冒泡就是说事件会按照 DOM 层次结构像水泡一样不断向上直至顶端，事件处理函数中返回 false, 会对事件停止冒泡，还可以停止元素的默认行为，就像如下示例：

在a标签上添加onclick事件，但是该事件返回值为false，这时运行后即使点击a标签中的内容，还是不会跳转到百度页面。

这也恰恰说明了事件的绑定是优先于a标签的跳转执行的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<a id="search" href="http://www.baidu.com" onclick="return test()">跳转</a>
		<script>
			function test(){
				return false;
			}
		</script>
	</body>
</html>

AnFooo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery绑定事件的方式总结

一.bind()方法绑定事件首先使用属性选择器获取input标签，然后调用bind方法，传入的第一个参数是要绑定的事件名，第二个参数是事件所调用的函数，这里使用匿名函数作为第二个参数，代码和运行结果如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title&g...
复制链接

扫一扫