jQuery事件绑定方式

最新推荐文章于 2022-01-23 13:28:22 发布

zyt1204732670

最新推荐文章于 2022-01-23 13:28:22 发布

阅读量81

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/zyt1204732670/article/details/107448002

版权

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

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

2. fn 表示绑定的函数；

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

<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="jquery-1.8.3/jquery-1.8.3.js" ></script>
		<title></title>
	</head>
	<body>
		<div style="background-color: #6495ED;">asd</div>
		<script>
			var obj={
					mouseover:function(){
						this.style.backgroundColor="red";
					},
					mouseout:function(){
						this.style.backgroundColor="blue";
					}	
			}
			$("div").bind(obj);	//绑定
			//$("div").unbind(obj);解除绑定
        </script>
    </body>
</html>

这样结果鼠标浮上去背景色为红，离开为蓝

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

		<div style="background-color: #6495ED;">asd</div>
		
		<script>
			
			}
			$("div").one("click", function() {
				console.log(123);
			})
		</script>

• jQuery 中定义了很多事件，其常用事件如下：

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

2.click ：鼠标点击匹配元素时触发 click 事件，例子如下：

<html>

	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="jquery-1.8.3/jquery-1.8.3.js"></script>
		<title></title>
	</head>

	<body>
		
		<select>
			<option value="001">--请选择--</option>
			<option value="002">2</option>
			<option value="003">3</option>
			<option value="004">4</option>
		</select>
		
	<script>
			
			$("select").change(function() {
				console.log($(this).val());
			});
		</script>
	</body>

</html>

这样当选择

时候会显示

keydown：当键盘或按钮被按下时触发keydown事件

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.8.3/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<form action="http://www.baidu.com">
			<input name="wd" />
		
		</form>
		
		<script>
			$(window).keydown(function(e){
				if(e.keyCode==13){
					//$("form").trigger("submit");
					$("form").submit();
				}
			})
		</script>
	</body>
</html>

当点击enter键时，就会出现百度界面