jQuery—事件绑定方式总结

最新推荐文章于 2021-12-10 19:06:12 发布

脊椎类哺乳动物

最新推荐文章于 2021-12-10 19:06:12 发布

阅读量205

点赞数

分类专栏：网页文章标签： jQuery 网页前后端

本文链接：https://blog.csdn.net/Kiwi_no/article/details/103001253

版权

网页专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.添加事件：

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

1. type 表示事件类型，多个事件类型使用空格分隔；

2. data 表示传递给绑定函数的额外数据对象，函数中使用 event.data 接收；

3. fn 表示绑定的函数；

代码如下：

<!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>

2.撤销事件：

unbind(type,[data|fn]])：删除每个匹配的元素上已绑定的事件，如果没有参数，则删除该元素上绑定的所有事件。

代码如下：

<!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("按钮");
			})
			
			$("[type='button']").unbind("click");
		</script>
	</body>
</html>

3.添加一次事件：(防止表单重复提交，提升用户体验)

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

代码如下：

<!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").one("click",function (){
				console.log("11111");//防止表单重复提交
			});
		</script>
	</body>
</html>

4.触发事件：

4.1keydown([[data],fn]) ：当键盘或按钮被按下时触发keydown事件

trigger(type,[data])：触发每一个匹配元素上某类事件，type表示一个或多个事件类型， data表示传入函数的数据

submit([[data],fn])：提交表单时触发submit 事件，该事件只适用于表单元素

代码如下：结合（功能：按下键盘Enter按钮即可触发）

<!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="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="触发事件" />
		</form>
		<script>
			//$("#search").trigger("submit");等价下
			//$("#search").submit();等价上
			$(window).keydown(function(){
				if(event.keyCode==13){
					$("#search").submit();
				}
			});
		</script>
	</body>
</html>

4.2change([[data],fn]) ：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件；

代码如下：（文本框内容改变即触发跳转页面）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>change([[data],fn])</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<body>
		<form id="search" action="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
			<input type="text" id="search_btn" value="百度一下" />
		</form>
		<script>
			$("#search_btn").click(function(){
				$("#search").submit();
			})
		</script>
	</body>

	</body>
</html>

4.3click([[data],fn]) ：鼠标点击匹配元素时触发click事件

代码如下：（点击按钮即跳转）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>click([[data],fn])</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="中国"/>
			<input type="button" id="search_btn" value="百度一下" />
		</form>
		<script>
			$("#search_btn").click(function(){
				$("#search").submit();
			})
		</script>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank" onclick="return test();">百度一下</a>
		<form onsubmit="return false"></form>
		
		<script>
			function test(){
				console.log("aaa");
				return false;
			}
		</script>

	</body>
</html>

页面显示：（点击仅增加console次数，并不跳转）

说明先执行test方法判断为false再触发事件

执行οnclick="return test()"：超链接跳转失败，点击无法跳转

超链接失效，点击无法跳转!

超链接失效，点击无法跳转超链接失效，点击无法跳转!!超链接失效，点击无法跳转!

超链接失效，点击无法跳转!

脊椎类哺乳动物

关注

0
点赞
踩
0

收藏

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

1.添加事件： bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下： 1.type表示事件类型，多个事件类型使用空格分隔； 2.data表示传递给绑定函数的额外数据对象，函数中使用event...
复制链接

扫一扫