onmouseenter、onmouseleave 和 onmouseover、onmouseout

50 阅读 0 评论 33 点赞

我是靠谱客的博主可靠画笔，最近开发中收集的这篇文章主要介绍onmouseenter、onmouseleave 和 onmouseover、onmouseout，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

enter 进入

leave 离开

over 越过,在...之上

out 出局,外面的

1、onmouseenter、onmouseleave，鼠标进入到指定元素区域内触发事件，不支持冒泡，不包含子元素的区域。

2、onmouseover、onmouseout鼠标进入指定元素触发事件，含子元素区域。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件对象的事件类型event.type</title>
<style type="text/css">
#demo{
width: 300px;
height: 300px;
background: #EDEDED;
margin: 50px;
}
#demo2{
width: 300px;
height: 300px;
background: #EDEDED;
margin: 50px;
}
</style>
</head>
<body>
<div id="demo">
demo
</div>
<div id="demo2">
demo2
</div>
<script type="text/javascript">
var demo = document.getElementById('demo');
demo.onclick = function(){
console.log('event: ',event.type);
};
demo.onmouseover = function(){
console.log('event: ',event.type);
};
demo.onmouseout = function(){
console.log('event: ',event.type);
};
var demo2 = document.getElementById('demo2');
demo2.onclick = function(){
console.log('event: ',event.type);
};
demo2.onmouseenter = function(){
console.log('event: ',event.type);
};
demo2.onmouseleave = function(){
console.log('event: ',event.type);
};
</script>
</body>
</html> 复制代码