浏览器事件之鼠标事件

最新推荐文章于 2024-09-10 13:23:11 发布

theanarkh

最新推荐文章于 2024-09-10 13:23:11 发布

阅读量2.6k

点赞数

分类专栏： html javascript

本文链接：https://blog.csdn.net/THEANARKH/article/details/51975596

版权

javascript 同时被 2 个专栏收录

121 篇文章 1 订阅

订阅专栏

html

18 篇文章 0 订阅

订阅专栏

鼠标事件分为按下鼠标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可以在捕获阶段进行劫持。