1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 .box{
12 width: 300px;
13 height: 300px;
14 background: pink;
15 }
16 .inner{
17 width: 100px;
18 height: 100px;
19 background: orange;
20 }
21
22 </style>
23 </head>
24 <body>
25 <div class="box">
26 <div class="inner"></div>
27 </div>
28 <script type="text/javascript">
29 var box = document.querySelector('.box');
30 // //该对移入移除事件，如果移入到子元素，会事件委派到子元素
31 // box.onmouseover = function () {
32 // console.log('移入')
33 // }
34 // box.onmouseout = function () {
35 // console.log('移出')
36 // }
37
38 //该对移入移除事件父元素不会发生事件委派
39 box.onmouseenter = function () {
40 console.log('移入')
41 }
42 box.onmouseleave = function () {
43 console.log('移出')
44 }
45 </script>
46
47 </body>
48 </html>
