Recently, I am writing a secondary menu, and everyone may be very proficient, but I still want to make some small records here for reference.
The most used mouse events are moving in and out, clicking, etc. Today, we mainly talk about the four mouse events, onmousemove, mouseenter, onmouseover and onmouseleave. The example code is as follows:
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px; text
-align: center;
color: lightgray;
}
p{
background-color: white;
}
</style>
</head>
<body>
<h3>This example demonstrates the difference between onmousemove, onmouseenter and onmouseover. </h3>
<p> The onmousemove event fires when the mouse moves over the div element. </p>
<p> The mouseenter event fires when the mouse pointer enters the div element. </p>
<p> The onmouseover event fires when the mouse pointer enters the div element, and also fires on child elements (p and span). </p>
<p> The onmouseleave event fires when the mouse pointer leaves the div element. </p>
<div onmousemove="myMoveFunction()">
<p>onmousemove: <br><span id="demo">Mouse over to me!</span></p>
</div>
<div onmouseenter="myEnterFunction ()">
<p>onmouseenter: <br> <span id="demo2">Mouse the cursor to me!</span></p>
</div>
<div onmouseover="myOverFunction()">
<p >onmouseover: <br> <span id="demo3">Move the cursor to me!</span></p>
</div>
<div onmouseleave="myLeaveFunction()">
<p>onmouseleave: <br> <span id="demo4">Move to me!</span></p>
</div>
<script>
var x = 0; y = 0;z = 0, w=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; }
function myLeaveFunction() { document.getElementById("demo4").innerHTML = w+=1; }
</script>
</body>
</html>
Among them:
1. The onmousemove event is triggered when the mouse moves over the div element, and the mouse moves within the p element (that is, it is also triggered in the white box, and the event bubbles to the parent div);
2. The onmouseenter event is triggered when the mouse pointer enters the div element, but it will not trigger when the mouse enters the p element, because event bubbling is not supported;
3. The onmouseover event fires when the mouse pointer enters the div element, and also fires on child elements (p and span) because the event bubbles up to the parent div;
4. The onmouseleave event is triggered when the mouse pointer removes the div element, but it will not be triggered when the mouse removes the p element because event bubbling is not supported.