js-onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别

发表于 | 分类于

前言

onmouseover 、onmouseout 与onmouseenter 、onmouseleave的区别，就俩句话：

  • onmouseover、nmouseout：鼠标移动到自身时候会触发事件，同时移动到其子元素身上也会触发事件(也就是会冒泡)

  • onmouseenter、onmouseleave：鼠标移动到自身是会触发事件，但是移动到其子元素身上不会触发事件（不会冒泡）

测试代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type='text/css'>
			*{ margin:0; padding:0;}
			#box3{
				height:100px;
				background:red;
			}
			#box2{
				padding:50px;
				background:blue;
			}
			#box1{
				padding:50px;
				background:green;
			}
		</style>
	</head>

	<body>
		<div id="box1">1
			<div id="box2">2
				<div id="box3">3</div>
			</div>
		</div>

		<script type="text/javascript">
			/*
				onmouseover
				onmouseout

				onmouseenter
				onmouseleave
			*/

			var oBox1 = document.getElementById('box1');
			///*
			
			// oBox1.onmouseover = function(){  //可以直接通过ID这样调用，但不提倡
			// 	console.log( 'over' );
			// };
		
			// oBox1.onmouseout = function(){  //可以直接通过ID这样调用，但不提倡
			// 	console.log( 'out' );
			// };
			//*/

			
			oBox1.onmouseenter = function(){  //可以直接通过ID这样调用，但不提倡
				console.log( 'enter' );
			};
			oBox1.onmouseleave = function(){
				console.log( 'leave' );
			};
			
		</script>
	</body>
</html>