onmouseover- onmouseout 和 onmouseenter- onmouseleave 区别简介

2024-04-01 22:54:04

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>                  .outer{             box-sizing: border-box;             margin: 50px auto;             padding-top: 20px;             width: 200px;             height: 200px;             background: lightcoral;         }         .inner{             margin: 0 auto;             width: 100px;             height: 100px;             background: lightgoldenrodyellow;         }     </style> </head> <body>          <div class="outer">outer         <div class="inner">inner</div>     </div>
    <script>         let outer = document.querySelector('.outer'),             inner = document.querySelector('.inner');
        /**          *  onmouseover 和 onmouseout 存在事件的冒泡传播机制          *   从父元素滑入到子元素，属于滑出父元素，滑入子元素          *   从子元素滑入到父元素，属于滑出子元素，滑入父元素          *          *   忽略了层级特点         */         // outer.onmouseover = function(){         //     console.log('outer over');         // }                  // outer.onmouseout = function(){         //     console.log('outer out');         // }
        // inner.onmouseover = function(){         //     console.log('inner over');         // }                  // inner.onmouseout = function(){         //     console.log('inner out');         // }             /**  如果有子元素，一般使用 onmouseenter 和 onmouseleave          *  onmouseenter 和 onmouseleave 默认阻止了冒泡传播机制          *   受到层级关系的影响          *    从父元素滑入到子元素，属于进入子元素，但没有离开父元素          * outer enter -》 inner enter -》 inner leave -》outer leave         */         outer.onmouseenter = function(){             console.log('outer enter');         }         outer.onmouseleave = function(){             console.log('outer leave');         }
        inner.onmouseenter = function(){             console.log('inner enter');         }                  inner.onmouseleave = function(){             console.log('inner leave');         }     </script> </body> </html>

码农公寓

相关文章