jq 事件监听on

旧城等待， 2021-07-24 17:48 480阅读 0赞

事件监听
    	语法
    		$(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>