jQuery中的事件绑定方法

最新推荐文章于 2023-07-07 16:55:54 发布

邵煜

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量287

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/weixin_45104211/article/details/103001749

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、总结

绑定事件：

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

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

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

三、fn表示绑定的函数；

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

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

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

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

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

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

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

事件冒泡

二、案例

事件绑定：

一、bind 绑定

<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="button" value="测试" />
		<script>
			$("[type='button']").bind("click",function(){
				console.log("test")
			})
		</script>
	</body>
</html>

此时的执行结果就是点击按钮就会在控制台输出test

二、unbind()解除绑定

<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="button" value="测试" />
		<script>
			$("[type='button']").bind("click",function(){
				console.log("test")
			})
			$("[type='button']").unbind("click");
		</script>
	</body>
</html>

紧接着这个就回把已经绑定了的事件给取消绑定

三、one()绑定一次事件

<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="button" value="测试" />
		<script>
			var i=1;
			$("[type='button']").one("click",function(){
				console.log("点击了"+i+"次");
				i++;
			})
		</script>
	</body>
</html>

此时的按钮再点击过一次后发现不会显示在控制面板上

四、trigger（）触发已知事件

如下代码是触发绑定的click对象

<html>
	<head>
		<meta charset="utf-8" />
		<title>测试</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<input type="button" value="测试" />
		<script>
			var i=1;
			$("[type='button']").bind("click",function(){
				console.log("点击了"+i+"次");
				i++;
			})
			$("[type='button']").trigger("click");
		</script>
	</body>
</html>

如下代码是触发的form表单的提交

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>trigger(type,[data])</title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<select>
			<option><-->请选择</-->--</option>
			<option>--一年级--</option>
		</select>
		<script>
			$("select").change(function(){
				console.log("ok!")
			})
		</script>
	</body>
</html>

效果是我选择是会输出

六、keydown()和submit（）

<!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>
			$(window).keydown(function(){
				if(event.keyCode==13){
					$("#search").trigger("submit");
				}
			})
		</script>
	</body>
</html>

event.keycode作用是获取在在页面上敲击键盘中的按键时所对应的编码（回车键是13）

注意此时的keydown绑定在window上

事件冒泡：

事件会按照 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>

此时由于click返回的是false，所以终止了a标签作用，并且控制台输出了“点击了”

邵煜

关注

0
点赞
踩
0

收藏

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

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

扫一扫