onmouseenter、onmouseleave 和 onmouseover、onmouseout1、onmousee

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>