jQuery事件绑定方式总结

最新推荐文章于 2022-06-04 20:28:11 发布

中国GZ

最新推荐文章于 2022-06-04 20:28:11 发布

阅读量88

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/Gong_Zheng6/article/details/107448025

版权

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-1.8.3.js" ></script>
	</head>
	<body>
		<a href="http://www.baidu.com" target="_blank">百度</a>
		<script>
			$("a").bind("click",function(){//绑定事件,click设置当点击时触发
				console.log("HelloWorld");
			});
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">
			哈哈哈
		</div>
		<script>
			var obj={
				mouseover:function(){
					this.style.backgroundColor="red";
				},
				mouseout:function(){
					this.style.backgroundColor="black";
				}
			}
			$("div").bind(obj);//传进对象绑定事件
		</script>
	</body>
</html>

解除绑定使用unbind()：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">
			哈哈哈
		</div>
		<script>
			var obj={
				mouseover:function(){
					this.style.backgroundColor="red";//this代表被绑定的DOM对象
				},
				mouseout:function(){
					this.style.backgroundColor="black";
				}
			}
			$("div").bind(obj);
                        $("div").unbind();//解除所有绑定事件
		</script>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">
			哈哈哈
		</div>
		<script>
			$("div").one("click",function(){//执行一次后不可再次执行
				console.log("HelloWorld");
			});
		</script>
	</body>
</html>

3.直接依情况绑定具体事件：

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<select id="province">
				<option value="">---请选择---</option>
				<option value="北京市">北京市</option>
				<option value="河南省">河南省</option>
				<option value="安徽省">安徽省</option>
                </select>
		<script>
			
                                $("select").change(function(){//当值发生改变时输出value值
				    console.log(this.value);
			        });
		</script>
	</body>
</html>

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

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

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

这三种事件形式与上方change相同，这里不再举例。

中国GZ

关注

0
点赞
踩
0

收藏

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

1.bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：1.type表示事件类型，多个事件类型使用空格分隔；2.data表示传递给绑定函数的额外数据对象，函数中使用event.data接收3.fn表示绑定的函数；例子：1.<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title
复制链接

扫一扫