jq 事件监听on

最新推荐文章于 2023-04-24 18:04:26 发布

神奇大叔

最新推荐文章于 2023-04-24 18:04:26 发布

阅读量652

点赞数

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

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103501478

版权

jQuery 专栏收录该内容

34 篇文章 1 订阅

订阅专栏

事件监听
	语法
		$(selector).on(event,childSelector(可选),data(可选),function) 
	
		childSelector(可选,后代元素css选择器选择，即给所选定元素的后代绑定该事件)
		
	多个事件绑定相同函数
	
		$('选择器').on('去掉on的事件名 去掉on的事件名',函数);
			可以将多个事件绑定一个函数,多个事件用空格隔开
	
	给不同事件绑定不同函数(采用json写法)
	
		$("选择器").on({'去掉on的事件名':函数,'去掉on的事件名':函数,...});
		
	
	添加json信息
	
		$('选择器').on('去掉on的事件名',{json信息},函数)
		$('选择器').on({'去掉on的事件名':函数,'去掉on的事件名':函数,...},{json信息})
			
		若添加了json信息，会被封存在event.data里,通过event.data.键名调用
		
	
	
解除事件监听

	$("选择器").off()  会移除绑定的所有事件
	$("选择器").off("去掉on的事件名")  会移除指定事件

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
	</head>
	<style>
		.box{
			height: 200px;
			width:200px;
			background-color: orange;
		}
	</style>
	<body>
		<div class="box">
			<p class="p1">111</p>
			<p>222</p>
			<p class="p1">333</p>
			<p>444</p>
			
		</div>
		
		<button class="btn">取消事件绑定</button>
		
		<script>
//			$(".box").on("click mouseenter mouseleave",function(){
//				console.log("box is clicked");
//			});
//			
//			$(".btn").click(function(){
				$('.box').off();
//				$(".box").off('click');
//			})
//
//			$(".box").on({
//				'click':function(){
//					$(this).css("background-color","red");
//				},'mouseenter':function(){
//					console.log("moveenter");
//				},'mouseleave':function()
//				{
//					console.log("leave");
//				}
//			})

			$("p").on('click',{'uname':"李白"},function(event){
				$(this).css('background-color',"red");
				console.log(event.data.uname);
			});
			

			
		</script>
	</body>
</html>

神奇大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jq 事件监听on

事件监听多个事件绑定相同函数 $('选择器').on('去掉on的事件名去掉on的事件名',函数); 可以将多个事件绑定一个函数,多个事件用空格隔开给不同事件绑定不同函数(采用json写法) $("选择器").on({'去掉on的事件名':函数,'去掉on的事件名':函数,...}); 添加json信息 $('选择器').on('去掉on...
复制链接

扫一扫