详述jQuery事件绑定方式

最新推荐文章于 2021-09-30 22:39:26 发布

程序猿11号

最新推荐文章于 2021-09-30 22:39:26 发布

阅读量153

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/m0_46383618/article/details/107513109

版权

一、bind()方法

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="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">郑州大学</div>
		
		<script>
		
			var obj ={
				name:"",
				doHomework:function(){
					
				},
			};
			
			obj ={
				mouseover:function(){
					this.style.backgroundColor="red";
				},
				mouseout:function(){
					this.style.backgroundColor="blue";
				}
			};

                        $("div").bind(obj);

		</script>	
			
	</body>
</html>

结果显示：
鼠标未悬浮时：

鼠标悬浮时：

鼠标悬浮后移开：

二、hover()方法

hover([over,]out)：over表示鼠标移到元素上触发的函数；out表示鼠标移出元素触发的函数。
代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件绑定</title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">郑州大学</div>
		
		<script>
			//$("form").trigger("submit");
			
			$("div").hover(function(){
				this.style.backgroundColor="red";
			},
			function(){
				this.style.backgroundColor="blue";
			});
		</script>
			
	</body>
</html>

结果显示：
鼠标未悬浮时：

鼠标悬浮时：

鼠标悬浮后移开：

三、change()方法

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件绑定</title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<div style="border: 1px solid red;">郑州大学</div>
		
		<select id="province">
			<option value="">---请选择---</option>
			<option value="001">北京市</option>
			<option value="002">湖南省</option>
			<option value="003">河南省</option>
		</select>
		
		<script>
			$("select").change(function(){
				console.log(this);
				
				/*var array = this.options;
				for(var i=0;i<array.length;i++){
					console.log(array[i]);
					if(option.selected){
						console.log(option.value);
					}
				}*/
				
				console.log($(this).val());
			});
		</script>
			
	</body>
</html>

选择北京市

结果展示

四、keydown()方法

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.8.3.js" ></script>
	</head>
	<body>
		<form action="https://baidu.com/s">
			<input type="button" value="百度" />//此时的按钮不能直接提交，要将button改为submit即可
			<input name="wd" />
		</form>
		
		<script>
			$(window).keydown(function(e){
				if(e.keyCode==13){
					$("form").trigger("submit");//摁下回车键执行
					//$("form").submit();
				}
			});
		</script>
	</body>
</html>

结果展示：