jQuery入门之事件绑定方式

这个名字真难起

于 2020-07-19 17:37:08 发布

阅读量145

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45949075/article/details/107448127

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

事件处理

bind(type,function)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：
①type表示事件类型，多个事件类型使用空格分隔。
②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 style="border: 1px solid red;">郑州大学</div>
		
		<script>
			$("div").bind("click",function(){//绑定单击响应事件
				console.log("hello");
			});
		</script>
	</body>
</html>

可以同时绑定多个不同事件类型的事件函数（通过类实现）：

<!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;">郑州大学</div>
		
		<script>
			//同时绑定多个事件（将事件封装为对象）
			var obj = {
				mouseover:function(){
					this.style.backgroundColor="blue";
				},
				mouseout:function(){
					this.style.backgroundColor="green";
				}
			};
			//绑定后this指向绑定的元素JavaScript对象
			$("div").bind(obj);//对jQuery元素对象绑定该事件对象
		</script>
	</body>
</html>

unbind(type)：删除每个该元素上已绑定的type事件。
　　　　　　　如果没有参数，则删除该元素上绑定的所有事件；
　　　　　　　如果要删除多个事件，则每个事件以空格间隔。

<!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;">郑州大学</div>
		
		<script>
			//同时绑定多个事件（将事件封装为对象）
			var obj = {
				mouseover:function(){
					this.style.backgroundColor="blue";
				},
				mouseout:function(){
					this.style.backgroundColor="green";
				}
			};
			$("div").bind(obj);
			
			$("div").unbind("mouseover mouseout");//移除两个事件
		</script>
	</body>
</html>

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

<!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;">郑州大学</div>
		
		<script>
			$("div").trigger("click");//触法一个jQuery对象已经有的事件
		</script>
	</body>
</html>

trigger(type)：触发每一个匹配元素上某类事件，type表示一个或多个事件类型。

<!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;">郑州大学</div>
		
		<script>
			$("div").one("click",function(){
				console.log("123456");
			});
			
			$("div").trigger("click");//触法一个jQuery对象已经有的事件
		</script>
		
		<form id="search" action="https://www.baidu.com/s">
			<input type="hidden" name="wd" value="中国"/>
		</form>
		
		<script>
			$("#search").trigger("submit");//触发form表单的submit事件
		</script>
	</body>
</html>

hover(over,out)：over函数表示鼠标移到元素上触发的函数；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 style="border: 1px solid red;">郑州大学</div>
		
		<script>
			//鼠标移上去时触发第一个函数，鼠标移下去时触发第二个函数
			$("div").hover(function(){
				this.style.backgroundColor="blue";
			},function(){
				this.style.backgroundColor="green";
			});
		</script>
	</body>
</html>

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

①click(function) ：鼠标点击匹配元素时触发click事件。
②change(function) ：文本框、密码框和文本域的值发生改变时或下拉列表选项发生变化时触发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>
			<option>--请选择--</option>
			<option value="001">河南省</option>
			<option value="002">北京市</option>
			<option value="003">河北省</option>
		</select>
		
		<script>
			//直接用chang函数来为对象绑定chang事件
			$("select").change(function(){
				/*var array = this.options;
				for(var i=0;i<array.length;i++){
					var option = array[i];
					if(option.selected){
						console.log(option.value);
					}
				}*/
				//通过jQuery来写
				console.log($(this).val());
			});
		</script>
	</body>
</html>

③keydown(function]) ：当键盘或按钮被按下时触发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 type="text" name="wd" />
			<input type="button" value="百度" />
		</form>
		
		<script>
			//不管焦点是否在文本框上，只要按enter键就会提交
			$(window).keydown(function(e){
				if(e.keyCode==13){//键盘上enter键对应13
					$("form").trigger("submit");
					$("form").submit();
				}
			});
		</script>
	</body>
</html>

④mouseout(function) ：鼠标从元素上移开时触发mouseout 事件。
⑤mouseover(function])：鼠标位于元素上方时触发mouseover 事件。

这个名字真难起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门之事件绑定方式

事件处理bind(type,function)：为每个匹配元素的特定事件绑定对应的事件处理函数，各参数含义如下：①type表示事件类型，多个事件类型使用空格分隔。②fn表示绑定的函数。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jque
复制链接

扫一扫