鼠标移入移出 

 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>

 

posted @ 2020-05-10 21:25  全情海洋  阅读(395)  评论(0)    收藏  举报