onmouseover- onmouseout 和 onmouseenter- onmouseleave 區別簡介
阿新 • • 發佈：2021-07-30
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
.outer{
box-sizing:border-box;
margin:50pxauto;
padding-top:20px;
width:200px;
height:200px;
background:lightcoral;
}
.inner{
margin:0auto;
width:100px;
height:100px;
background:lightgoldenrodyellow;
}
</style>
</head>
<body>
<divclass="outer">outer
<divclass="inner">inner</div>
</div>
<script> letouter=document.querySelector('.outer'), inner=document.querySelector('.inner');
/** *onmouseover和onmouseout存在事件的冒泡傳播機制 *從父元素滑入到子元素，屬於滑出父元素，滑入子元素 *從子元素滑入到父元素，屬於滑出子元素，滑入父元素 * *忽略了層級特點 */ //outer.onmouseover=function(){ //console.log('outerover'); //} //outer.onmouseout=function(){ //console.log('outerout'); //}
//inner.onmouseover=function(){ //console.log('innerover'); //} //inner.onmouseout=function(){ //console.log('innerout'); //} /**如果有子元素，一般使用onmouseenter和onmouseleave *onmouseenter和onmouseleave預設阻止了冒泡傳播機制 *受到層級關係的影響 *從父元素滑入到子元素，屬於進入子元素，但沒有離開父元素 *outerenter-》innerenter-》innerleave-》outerleave */ outer.onmouseenter=function(){ console.log('outerenter'); } outer.onmouseleave=function(){ console.log('outerleave'); }
inner.onmouseenter=function(){ console.log('innerenter'); } inner.onmouseleave=function(){ console.log('innerleave'); } </script> </body> </html> 我是Eric,手機號是13522679763
<script> letouter=document.querySelector('.outer'), inner=document.querySelector('.inner');
/** *onmouseover和onmouseout存在事件的冒泡傳播機制 *從父元素滑入到子元素，屬於滑出父元素，滑入子元素 *從子元素滑入到父元素，屬於滑出子元素，滑入父元素 * *忽略了層級特點 */ //outer.onmouseover=function(){ //console.log('outerover'); //} //outer.onmouseout=function(){ //console.log('outerout'); //}
//inner.onmouseover=function(){ //console.log('innerover'); //} //inner.onmouseout=function(){ //console.log('innerout'); //} /**如果有子元素，一般使用onmouseenter和onmouseleave *onmouseenter和onmouseleave預設阻止了冒泡傳播機制 *受到層級關係的影響 *從父元素滑入到子元素，屬於進入子元素，但沒有離開父元素 *outerenter-》innerenter-》innerleave-》outerleave */ outer.onmouseenter=function(){ console.log('outerenter'); } outer.onmouseleave=function(){ console.log('outerleave'); }
inner.onmouseenter=function(){ console.log('innerenter'); } inner.onmouseleave=function(){ console.log('innerleave'); } </script> </body> </html> 我是Eric,手機號是13522679763