jQuery事件绑定方式_jquery为每个元素指定事件，绑定一个处理程序，可以用哪个函数？aunbindbbindctrig-CSDN博客

本文链接：https://blog.csdn.net/QBjie/article/details/107448233

1.bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数

2.unbind(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>
		<a href="http://www.baidu.com" target="_blank">baidu</a>
		<div style="border: 1px solid red;">
			<span>zzu</span><span>hgaore</span>
		</div>
		<script>
			$("a").bind("click",function(){
				console.log("hello");
			})
			var er={
				mouseover:function(){
					this.style.backgroundColor="orange";
				},
				mouseout:function(){
					this.style.backgroundColor="green";
				}
			}
			$("div").bind(er);
			$("div").unbind("mouseover");
			
		</script>
	</body>
</html>

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

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

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

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

例如：

<!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;">
			<span>zzu</span><span>hgaore</span>
		</div>
		<script>
			$("div").one("click",function(){
				console.log("come on!");
			})
			$("div").trigger("click");
			$("div").hover(function(){
				this.style.backgroundColor="paleturquoise";
			},
			function(){
				this.style.backgroundColor="aqua";
			});
		</script>
	</body>
</html>

7.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="1">a</option>
			<option value="2">s</option>
			<option value="3">d</option>
		</select>
		<script>
			$("select").change(function(){
				/*var array = this.options;
				console.log(array);
				for(var i=0;i<array.length;i++){
					var option = array[i];
					if(option.selected){
						console.log(option.value);
					}
				}*/
                                /*等效于*/
				console.log($(this).val());
			});
			
		</script>
	</body>
</html>

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
	</head>
	<body>
		<form action="https://www.baidu.com/s">
			<input name="wd"/>
			<input type="button" value="百度"/>
		</form>
		<script>
                        /*鼠标在页面任何位置（window），点击回车健即可提交（e.keyCode==13）*/
			$(window).keydown(function(e){
				if(e.keyCode==13){
					$("form").submit();
				}
			});
		</script>
	</body>
</html>