onmouseenter 和 onmouseover 的不同，innerHTML

原創

2020-02-21 18:18

該實例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。
onmousemove 事件在鼠標移動到 div 元素上時觸發。
mouseenter 事件在鼠標指針進入 div 元素時觸發，唯一的區別是 onmouseenter 事件不支持冒泡。
onmouseover 事件在鼠標指針進入 div 元素時觸發 ,在子元素上也會觸發(p 和 span)。

[html] view
plain copy 

<!DOCTYPE html>  

<html>  

<head>  

<style>  

div {  

    width: 100px;  

    height: 100px;  

    border: 1px solid black;  

    margin: 10px;  

    float: left;  

    padding: 30px;  

    text-align: center;  

    background-color: lightgray;  

}  

p {  

    background-color: white;  

}  

</style>  

</head>  

<body>  

<h3>該實例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3>  

<p> onmousemove 事件在鼠標移動到 div 元素上時觸發。</p>  

<p> mouseenter 事件在鼠標指針進入 div 元素時觸發。 </p>  

<p> onmouseover 事件在鼠標指針進入 div 元素時觸發,唯一的區別是 onmouseenter 事件不支持冒泡 ,在子元素上也會觸發(p 和 span)。</p>  

<div onmousemove="myMoveFunction()">  

  <p>onmousemove: <br> <span id="demo">鼠標移動到我這!</span></p>  

</div>  

<div onmouseenter="myEnterFunction()">  

  <p>onmouseenter: <br> <span id="demo2">標移動到我這!</span></p>  

</div>  

<div onmouseover="myOverFunction()">  

  <p>onmouseover: <br> <span id="demo3">標移動到我這!</span></p>  

</div>  

<script>  

x = 0;  

y = 0;  

z = 0;  

function myMoveFunction() {  

    document.getElementById("demo").innerHTML = z+=1;  

}  

function myEnterFunction() {  

    document.getElementById("demo2").innerHTML = x+=1;  

}  

function myOverFunction() {  

    document.getElementById("demo3").innerHTML = y+=1;  

}  

</script>  

</body>  

</html>