jQuery事件绑定

最新推荐文章于 2024-05-18 18:58:15 发布

Wwwwww~

最新推荐文章于 2024-05-18 18:58:15 发布

阅读量89

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/bravery__/article/details/107447999

版权

java 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

1.bind-unbind:

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

<body>
		<div style="border: 1px solid red;">
			<span>zzu</span><br />
			<span>郑州</span>
		</div>
</body>
<script>
		var obj={
				mouseover:function(){
					this.style.backgroundColor="red";
				},
				mouseout:function(){
					this.style.backgroundColor="green";//backgroundColor用等号赋值
				}
			}
			$("div").bind(obj);
</script>

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

<body>
		<div style="border: 1px solid red;">
			<span>zzu</span><br />
			<span>郑州</span>
		</div>
</body>
<script>
		var obj={
				mouseover:function(){
					this.style.backgroundColor="red";
				},
				mouseout:function(){
					this.style.backgroundColor="green";//backgroundColor用等号赋值
				}
			}
			$("div").unbind(obj);
</script>

2.one：

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

<body>
		<div style="border: 1px solid red;">
			<span>zzu</span><br />
			<span>郑州</span>
		</div>
</body>
<script>
		var obj={
				mouseover:function(){
					this.style.backgroundColor="red";
				},
				mouseout:function(){
					this.style.backgroundColor="green";//backgroundColor用等号赋值
				}
			}
			$("div").one("click",function(){
				console.log("wadas");//鼠标点击时调用，且只调用一次
			});
</script>

3.利用jQuery对象函数绑定

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

<body>
	<select id="pro">
					<option value="">--请选择--</option>
					<option value="1">北京市</option>
					<option value="2">河南省</option>
					<option value="3">河北省</option>
	</select>
</body>
<script>
			$("select").change(function(){//change当被选中的元素内容发生变化时，触发函数效果
				var array= this.options;
				for (var i=0;i<array.length;i++) {
					var option=array[i];
					if(option.selected){
						console.log(option.value);
					}
				}
			})
		</script>

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

<body>
	<select id="pro">
					<option value="">--请选择--</option>
					<option value="1">北京市</option>
					<option value="2">河南省</option>
					<option value="3">河北省</option>
	</select>
</body>
<script>
			$("select").click(function(){
				var array= this.options;
				for (var i=0;i<array.length;i++) {
					var option=array[i];
					if(option.selected){
						console.log(option.value);
					}
				}
			})
		</script>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<script>
			$(window).keydown(function(event) {
			if(event.keyCode == 13) {
				console.log("Enter键");
			}
		});
		</script>
	</body>
</html>

Wwwwww~

关注

0
点赞
踩
0

收藏

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

1.bind-unbind:bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：1.type表示事件类型，多个事件类型使用空格分隔；2.data表示传递给绑定函数的额外数据对象，函数中使用event.data接收（了解）；3.fn表示绑定的函数；<body> <div style="border: 1px solid red;"> <span>zzu</span><br />
复制链接

扫一扫

专栏目录