jQuery中事件绑定

最新推荐文章于 2021-07-29 21:28:09 发布

原创最新推荐文章于 2021-07-29 21:28:09 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

个人专栏收录该内容

64 篇文章

订阅专栏

1、bind：

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

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

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

3.fn表示绑定的函数；

按下enter键。

<!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(event) {
					var key = event.which;
					if(key == 13) {
						console.log("Enter键");
					}
				});
			});
		</script>
	</head>
	<body>
	</body>
</html>

2、unbind:

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>unbind(type,[data|fn]])</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<span>白日依山尽，黄河入海流。</span>
		<script>
			$("span").bind({
				mouseover: function() {
					$("span").css("color", "red");
				},
				mouseout: function() {
					$("span").css("color", "blue");
				}
			});
			
			$("span").unbind("mouseover mouseout");
		</script>
	</body>
</html>

<input type="button" value="按钮" />
			<script>
				$("input").one("click",function(){
					console.log(111);
				})
				$("input").bind("click",function(){
					console.log(222);
				})
				$("input").unbind("click");
			</script>

3.one:

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

<input type="button" value="按钮" />
			<script>
				$("input").one("click",function(){
					console.log(111);
				});
                        </script>

4.trigger:

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>submit([[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="中国"/>
		</form>
		<script>
			$("#search").trigger("submit");
		</script>
	</body>

5.change:

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

6.click:鼠标点击匹配元素时触发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>

7.keydown:

keydown([[data],fn]) ：当键盘或按钮被按下时触发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>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>submit([[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="中国"/>
		</form>
		<script>
			$("#search").submit();
		</script>
	</body>
</html>

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

如下面的代码是先执行onclick 然后跳转最后到标签

 <!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("点击了...");
				return false;
			}
		</script>
	</body>
</html>

jQuery中事件绑定

return true 则会跳转。