JQuery on绑定事件以及off取消事件

最新推荐文章于 2022-04-19 21:18:01 发布

如梦灬初醒

最新推荐文章于 2022-04-19 21:18:01 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/TXW6666/article/details/106282671

版权

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

语法:$(selector).on(events,[selector],[data],fn)
events：一个或多个用空格分隔的事件类型和可选的命名空间。
selector：可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data：可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。
fn：该事件被触发时执行的函数。 false值也可以做一个函数的简写，返回false。

			div{
				width: 100px;
				height: 100px;
				background-color: #1E90FF;
			}

		<div class="box">
			
		</div>

在这里插入图片描述

添加一个事件 on(“事件名”,响应函数)

响应函数可以时匿名函数也可以是函数名
相同的事件后添加的事件不会覆盖前面添加的事件

			$(".box").on("click",function(){
				$(this).css({backgroundColor:"red"})
			})

在这里插入图片描述

给多个事件添加一个响应函数 on(“事件名”,“事件名”,响应函数) 注意多个事件注意用空格隔开

			$(".box").on("mouseover mouseout",function(){   // 添加移入移出事件
   				console.log("Hello!!")
			});
			
			//function onclick(){
			//	console.log("Hello!!")
			//}
			//$(".box").on("mouseover mouseout",onclick);

在这里插入图片描述

一次添加多个事件不同的响应函数on({“事件名1” : “响应函数1” , “事件名2” : “响应函数2”})

在添加多个事件时一定要注意要以对象得形式传参

			$(".box").on({
				"mouseover":function(){console.log("移入事件!!")},
				"mouseout ":function(){console.log("移出事件!!")}
			});

在这里插入图片描述

给事件中传入参数

当需要传入参数时需要利用data 同时也必须时对象的时形式传入参数
用data参数为绑定的事件处理函数传递数据。

				$("div").on("click",{"mytext":"Hello!!"},function(e){
					console.log("点击事件"+e.data.mytext)
		 	 		$(this).text(e.data.mytext);
				})
				//var text="Hello!!" 
		 	 	//$("div").on("click",{"mytext":text},function(e){
	 	 			//$(this).text(e.data.mytext);
				//})

在这里插入图片描述

.off() 取消事件

.off()取消所有事件

 $("div").off();//取消所有的事件

.off(事件名)取消一个事件

$("div").off("click");//取消点击事件

.off(“事件名”,函数名)移除一个响应函数

 $("div").off("mouseover",hello);//取消移入事件的hello响应函数

整体代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background-color: #1E90FF;
			}
		</style>
	</head>
	
	<body>
		<div class="box">
			
		</div>
		<script type="text/javascript">
			//添加一个点击事件
			
			$(".box").on("click",function(){
				$(this).css({backgroundColor:"red"})
				console.log("点击事件")
			})
			//添加多个事件 执行一个响应函数
			//响应函数可以时匿名函数也可以是函数名
			//创建一个和函数以函数名的方式传入
			function hello(){
					console.log("Hello!!")
			}

			$(".box").on("mouseover mouseout",hello);
			//一次添加多个事件不同的响应函数
			//相同的事件后添加的事件不会覆盖前面添加的事件
			$(".box").on({
				"mouseover":function(){console.log("移入事件!!")},
				"mouseout ":function(){console.log("移出事件!!")}
			});
			
			//利用data给事件中传入参数
			$("div").on("click",{"mytext":"Hello!!"},function(e){
				console.log("点击事件"+e.data.mytext)
		 	 	$(this).text(e.data.mytext);
			})
			//var text="Hello!!" 
		 	//$("div").on("click",{"mytext":text},function(e){
	 	 		//$(this).text(e.data.mytext);
			//})
		 	 
		 	//$("div").off();//取消所有的事件

			//$("div").off("click");//取消点击事件
			 
			//$("div").off("mouseover",hello);//取消移入事件
		</script>
	</body>
</html>

如梦灬初醒

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery on绑定事件以及off取消事件

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。语法:$(selector).on(events,[selector],[data],fn)events：一个或多个用空格分隔的事件类型和可选的命名空间。selector：可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。data：可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。fn：该事件被触发时执行的函数。 fa
复制链接

扫一扫