jQuery事件处理

ゝ一纸荒年。 2022-12-02 15:02 130阅读 0赞

1.绑定点击监听的两种方法：  
例：

$(".out").click(function(){
    				console.log("绑定click监听")
    			});
    			$(".out").on("click",function(){
    				console.log("用on绑定监听");
    			});

2.绑定鼠标移入和移出的事件监听（三种方法）：  
例：

//给.inner绑定鼠标移入和移出的事件监听（用三种方法）
    			$(".inner").mouseenter(function() {
    				console.log("移入");
    			});
    			$(".inner").mouseleave(function(){
    				console.log("移出");
    			});
    //			$(".inner").on("mouseenter",function(){
    //				console.log("移入");
    //			});
    //			$(".inner").on("mouseleave",function(){
    //				console.log("移出");
    //			});
    //			$(".inner").hover(function(){
    //				console.log("移入");
    //			},function(){
    //				console.log("移出");
    //			});

3.点击按钮解除所有事件监听  
例：

//点击btn1解除.inner上所有事件监听
    			$("#btn1").click(function(){
    				$(".inner").off();
    			});

4.点击按钮解除inner上的mouseover事件

//点击btn2解除.inner上的mouseover事件
    			$("#btn2").click(function(){
    				$(".inner").off(mouseenter);
    			});

5.点击按钮得到事件坐标  
例：

//点击btn3得到事件坐标
    			$("#btn3").click(function(event){
    				console.log(event.clientX,event.clientY);//原点为窗口左上角
    				console.log(event.pageX,event.pageY);//原点为页面上左上角
    				console.log(event.offsetX,event.offsetY);//原点是事件左上角
    			});

6.取消冒泡行为  
例：

//点击.inner区域，外部点击监听不响应
    			$(".inner").click(function(event){
    				console.log("click inner");
    				event.stopPropagation();
    			});

7.取消默认行为  
例：

$("#test4").click(function(){
    				if(new Date()%2==0){//当时间是偶数时不跳转
    					event.preventDefault();
    				}
    			});

mouseover和mouseenter的区别  
mouseover/mouseout 在移入子元素时也会触发  
mouseenter/mouseleave 只在移入当前元素时才会触发  
hover就是mouseenter和mouseleave  
click()和on(“click”);区别  
on(“click”)通用，但编码麻烦  
click()编码简单，但有些没有该方法