JavajQuery事件

最新推荐文章于 2022-01-22 20:53:47 发布

Happy_syy

最新推荐文章于 2022-01-22 20:53:47 发布

阅读量265

点赞数

本文链接：https://blog.csdn.net/Happy_syy/article/details/103001619

版权

1.bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：
①type表示事件类型，多个事件类型使用空格分隔；
②data表示传递给绑定函数的额外数据对象，函数中使用event.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(){   //bind绑定事件  click事件的类型
				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(){   //bind绑定事件  click事件的类型
				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>
			
			$("[type='button']").one("click",function(){   //绑定时间  时间的类型
				console.log("按钮");
			})
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述
无论点击多少次按钮，只显示一次，用于注册用户。
4.trigger(type,[data])：触发每一个匹配元素上某类事件，type表示一个或多个事件类型， data表示传入函数的数据
5.keydown([[data],fn]) ：当键盘或按钮被按下时触发keydown事件。
6.submit([[data],fn])：提交表单时触发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 action="http://www.baidu.com" id="search">
			<input type="hidden" name="wd" value="中国" />  <!--wd不能变化-->
		</form>
		
		<script>
			 $(window).keydown(function(){
        	console.log(event.keyCode);  //event.keyCode根据键盘的值来设置的
        	if(event.keyCode==13){   //这个是键盘上回车键的值
        		$("#search").submit();
        	//	$("#search").trigger("submit");  这俩种方法中的任意一个都可以
        	}
        })
		</script>
	</body>
</html>

运行的结果，在界面敲回车，会跳转到百度的界面。
7.事件冒泡：事件会按照 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("点击了...");
				return false;
			}
		</script>
	</body>
</html>

是先执行test方法，再执行跳转界面。
如果test方法返回的是true,就可以进行跳转界面了。
在这里插入图片描述

Happy_syy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavajQuery事件

1.bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：①type表示事件类型，多个事件类型使用空格分隔；②data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）；③fn表示绑定的函数；<!DOCTYPE html><html> <head> <meta c...
复制链接

扫一扫