25、onmouseover 、onmouseout 與onmouseenter 、onmouseleave的區別
阿新 • • 發佈：2019-02-08
onmouseover、nmouseout：滑鼠移動到自身時候會觸發事件，同時移動到其子元素身上也會觸發事件
onmouseenter、onmouseleave：滑鼠移動到自身是會觸發事件，但是移動到其子元素身上不會觸發事件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <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>