浏览器事件之鼠标事件

鼠标事件分为按下鼠标mousedown,放开鼠标mouseup,移动鼠标,鼠标移入(2种:mouseenter,mouseover),鼠标移出(2种:mouseleave,mouseout)

按下鼠标时只会触发一次鼠标事件而不是一直触发,放开鼠标也是,但是移动鼠标,鼠标移动事件会一直触发。如果给A元素绑定了mouseenter或者mouseleave,那么鼠标在进入移出该元素的最大范围时会触发相应的事件,这两个事件是针对A元素的最大范围进行触发的,因为这两个事件是不冒泡的,所以鼠标进入或移出A元素的子元素时,只会触发该子元素enter或者leave事件,而不是冒泡到父元素A。而mouseover和mouseout则不是,当鼠标进入或者移出到A元素的每一个子元素时,相应的事件都会冒泡到父元素A,从而触发A元素的相关事件。

有兴趣可以执行下面的代码进行查看效果。mouseover和mouseout

<!DOCTYPE html>
<html>
<head>
</head>
<body >
<div style="padding:100px;border:1px red solid" id="c">
<div style="padding:50px;border:1px red solid" id="d">
<div style="padding:25px;border:1px red solid" id="e">
1111111
</div>
</div>
</div>


<script type="text/javascript">
document.getElementById("c").οnmοuseοut=function(e){
    console.log("c:onmouseout",e.target)
}
document.getElementById("c").οnmοuseοver=function(e){
    console.log("c:onmouseover",e.target)
}


document.getElementById("d").οnmοuseοut=function(e){
    console.log("d:onmouseout",e.target)
}
document.getElementById("d").οnmοuseοver=function(e){
    console.log("d:onmouseover",e.target)
}


document.getElementById("e").οnmοuseοut=function(e){
    console.log("e:onmouseout",e.target)
}
document.getElementById("e").οnmοuseοver=function(e){
    console.log("e:onmouseover",e.target)
}
    </script>
</html>


mouseenter和mouseleave:

<!DOCTYPE html>
<html>
<head>
</head>
<body >
<div style="padding:100px;border:1px red solid" id="c">
<div style="padding:50px;border:1px red solid" id="d">
<div style="padding:25px;border:1px red solid" id="e">
1111111
</div>
</div>
</div>


<script type="text/javascript">
document.getElementById("c").οnmοuseenter=function(e){
    console.log("c:onmouseenter",e.target)
}
document.getElementById("c").οnmοuseleave=function(e){
    console.log("c:onmouseleave",e.target)
}


document.getElementById("d").οnmοuseenter=function(e){
    console.log("d:onmouseenter",e.target)
}
document.getElementById("d").οnmοuseleave=function(e){
    console.log("d:onmouseleave",e.target)
}


document.getElementById("e").οnmοuseenter=function(e){
    console.log("e:onmouseenter",e.target)
}
document.getElementById("e").οnmοuseleave=function(e){
    console.log("e:onmouseleave",e.target)
}
    </script>
</html>


mouseenter,mouseleave系和mouseover,mouseout系的区别不仅在于冒泡,还在于作用范围,假设A元素绑定了以上的事件,对于前者系的事件,A的事件触发范围是整个A元素(包括子元素)大小,对于后者系的事件,A的触发范围是A的大小减去最近子元素的大小。即减去挖去的部分,也就是说从里外走移动鼠标的时候,进入或者离开这个范围都会触发A的over和out事件。但不会触发enter和leave事件。A的子元素触发enter,leave事件时不会冒泡到A,但是A可以在捕获阶段进行劫持。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值