HTML中详述jQuery事件绑定方式

最新推荐文章于 2021-07-01 02:49:51 发布

Stay_close

最新推荐文章于 2021-07-01 02:49:51 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/qq_46384325/article/details/107581818

版权

bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数。
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>
  	<div>GOOD LUCK</div>
  	
  	<script>
  		obj = {
				mouseover:function(){
					this.style.backgroundColor="red";
				},
				
				mouseout:function(){
					this.style.backgroundColor="green";
				}
			};

  		$("div").bind("click",function(){
  			console.log("success");
  		});
  		$("div").bind(obj);//鼠标放置背景色变红，移开背景色变绿
  		$("div").unbind("mouseover");//鼠标放置背景色不变红
  		
  	</script>
  </body>
</html>

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>GOOD LUCK</div>
  	
  	<script>
  		$("div").one("click",function(){
  			console.log("success");//只有一次生效
  		})
  		
  	</script>
  </body>
</html>

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="city">
  		<option value="">--请选择--</option>
  		<option value="001">北京市</option>
  		<option value="002">天津市</option>
  		<option value="003">上海市</option>
  	</select>
  	<script>
  		$("select").change(function(){
  			console.log($(this).val());
  		});
  	</script>
  </body>
</html>

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="http://www.baidu.com/s">
			<input name="name" />
			<input type="button" value="百度" />
		</form>
		
		<script>
			$(window).keydown(function(e){
				if(e.keyCode==13){//设定按下回车键时提交
					$("form").trigger("submit");
				}
			})
		</script>
	</body>
</html>

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

<!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>GOOD LUCK</div>
		
		<script>
			$("div").hover(function(){
				this.style.backgroundColor="red";//over
			},
			function(){
				this.style.backgroundColor="black";//out
			});
		</script>
	</body>
</html>