您的位置：首页 > Web前端 > JavaScript

mouseover与mouseenter和mouseout与mouseleave区别

2017-07-04 11:01 501 查看

区别在于：mouseover与mouseout再进入或离开后会执行这两个事件；

mouseenter与mouseleave在进入或离开后代元素不会执行这两个事件。

下面实例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#oDiv1 {
height: 200px;
width: 200px;
background-color: #bfa;
}

.oDiv2 {
height: 100px;
width: 100px;
background-color: #baf;
margin: 0 auto;
position: relative;
top: 50px;
}
</style>
</head>
<body>
<div id="oDiv1">
<div class="oDiv2">
</div>
</div>
<script>

//  mouseover与mouseenter区别
/*mouseover:在进入指点元素的时候，如果进入后代元素，也会触发
*  mouseenter:鼠标移入子代中不会触发改时间
//   mouseout与mouseleave区别
mouseout：进入子元素，会触发祖先元素执行该事件
mouseout：进入子元素，会触发祖先元素不会执行该事件
* */
oDiv1 = document.getElementById('oDiv1');
oDiv1.addEventListener('mouseover', function () {
console.log("mouseover");  //会执行三次
});
oDiv1.addEventListener('mouseenter', function () {
console.log("mouseenter"); // 会执行一次
});
oDiv1.addEventListener('mouseout', function () {
console.log("mouseout"); // 会执行三次
});
oDiv1.addEventListener('mouseleave', function () {
console.log("mouseleave");  //会执行一次
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript javaScript事件

相关文章推荐

新的分享

章节导航