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> 复制代码