jQuery中的事件

最新推荐文章于 2022-09-20 20:52:15 发布

离弃。

最新推荐文章于 2022-09-20 20:52:15 发布

阅读量59

点赞数

本文链接：https://blog.csdn.net/faithinmyheart/article/details/103001616

版权

bind(type,[data],fn)：为每一个匹配到的元素绑定方法

type表示事件类型，多个事件类型使用空格分隔；
data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）；
fn表示绑定的函数；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bind(type,[data],fn)</title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$(function() {
				$(window).bind('keydown', function() {
				    if(event.keyCode==13){
                        console.log("运行成功");
                    }
				});
			});
		</script>
	</head>
	<body>
	</body>
</html>
//打开网页后按下Enter键会在控制台打印：运行成功。

unbind：将bind事件取消掉

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bind(type,[data],fn)</title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$(function() {
				$(window).bind('keydown', function() {
					if(event.keyCode== 13) {
						console.log("Enter键");
					}
				});
                $(window).unbind();
			});
		</script>
	</head>
	<body>
	</body>
</html>
//打开网页后按下Enter键控制台不打印

one：事件只被执行一次（该方法大都被用在注册信息中的注册提交按钮上）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>one(type,[data],fn)</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="button" value="按钮"/>
		<script>
			$("[value='按钮']").one("click", function(){
			  	console.log("仅执行一次");
			});
		</script>
	</body>
</html>
//该方法只被执行一次，多次点击，控制台上也只打印一次

trigger：触发每一个匹配元素上某类事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>trigger(type,[data])</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="中国"/>
		</form>
		<script>
			$("#search").trigger("submit");
		</script>
	</body>
</html>
//打开网页后会直接跳转到百度中国页面上

change：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发change 事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-3.4.1.js"></script>
	<body>
		<input type="text" />

		<script>
			$("input").change(function(){
				console.log("1111");
			})
		</script>
	</body>
</html>
//当输入框中内容变化时会在控制台打印1111

click：鼠标点击匹配元素时触发click事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></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>
//点击百度一下会跳转到中国的页面中

keydown：当键盘或按钮被按下时触发keydown事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>click([[data],fn])</title>
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			$(window).keydown(function(event) {
				if(event.keyCode == 13) {
					console.log("Enter键");
				}
			});
		</script>
	</head>
	<body>
	</body>
</html>
//打开网页后按下Enter键后会在控制台打印"Enter键"

submit:提交表单时触发submit 事件，该事件只适用于表单元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<form id="search" action="https://www.baidu.com">
		</form>
		<script>
			$("#search").submit();
		</script>
	</body>
</html>
//打开网页会直接跳转到百度界面上

事件冒泡：事件会按照 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" onclick="return test();">百度</a>
		<script>
			function test(){
				console.log("1111");
				return false;
			}
		</script>
	</body>
</html>
//当return false时，此时只在控制台打印1111，无法实现跳转


<!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" onclick="return test();">百度</a>
		<script>
			function test(){
				console.log("1111");
				return true;
			}
		</script>
	</body>
</html>
//当retur true时，不仅会在控制台打印1111，还会跳转到百度页面上去

离弃。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的事件

bind(type,[data],fn)：为每一个匹配到的元素绑定方法type表示事件类型，多个事件类型使用空格分隔； data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）； fn表示绑定的函数；<!DOCTYPE html><html> <head> <meta charset="utf-8" /&gt...
复制链接

扫一扫