Related readings:
JavaScript Event Learning Summary (V) Mouse Event Type in JS
//www.VeVB.COM/article/86259.htm
JavaScript Event Learning Summary (I) Event Flow
//www.VeVB.COM/article/86261.htm
JavaScript event learning summary (IV) Public members of event (properties and methods)
//www.VeVB.COM/article/86262.htm
JavaScript event learning summary (II) js event handler
//www.VeVB.COM/article/86264.htm
JavaScript event learning summary (III) js event object
Mouse Events
9 mouse events are defined in the DOM3 level event.
mousedown: Triggered when the mouse button is pressed (left or right).
Cannot be triggered by keyboard.
mouseup: Triggered when the mouse button is released and pops up.
Cannot be triggered by keyboard.
click: Triggered when clicking the left mouse button or pressing the Enter key. This is important for ensuring accessibility, meaning that the onclick event handler can be executed both through the keyboard and through the mouse. dblclick: Triggered when the left mouse button is double-clicked. mouseover: Move the mouse over the target element. This will fire when the mouse moves over its descendant elements. mouseout: Mouse removes the above target element.
mouseenter: The mouse moves into the range of the element and triggers the event, which does not bubble, that is, it will not trigger when the mouse moves to its descendant elements.
mouseleave: Triggered when the mouse moves out of the element range, and the event does not bubble, that is, it will not trigger when the mouse moves to its descendant elements.
mousemove: The mouse is constantly triggered when it moves inside the element.
Cannot be triggered by keyboard.
note:
The mousedown and mouseup events are triggered successively on an element to trigger the click event. The dblclick event will be triggered only if two click events are fired one after another.
If one of mousedown or mouseup is cancelled, the click event will not be triggered. If the click event is cancelled directly or indirectly, the dblclick event will not be triggered.
1. The order of event triggering
For example: Double-click the button and take a look at the event triggered above.
<body><input id="btn" type="button" value="click"/><script> var btn=document.getElementById("btn"); btn.addEventListener("mousedown",function(event){ console.log("mousedown"); },false); btn.addEventListener("mouseup",function(){ console.log("mouseup"); },false); btn.addEventListener("click", function () { console.log("click"); },false); btn.addEventListener("dblclick", function () { console.log("dblclick"); },false);</script></body>2. The difference between mouseenter and mouseover
the difference:
The mouseover event will bubble, which means that it will fire when the mouse moves to its descendant elements.
The mouseenter event does not bubble, which means that the mouse will not fire when it moves to its descendant elements.
For example:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> #outer{ position: absolute; width: 200px; height: 200px; top: 0; left: 0; bottom: 0; right: 0; margin: auto; background-color: pink; } #inner{ position: absolute; width: 100px; height: 100px; top: 50%; left: 50%; margin-left: -50px; background-color: orange; text-align: center; line-height: 100px; } #outer,#inner{ border-radius:50%; } </style> <script src="jquery-2.1.1.min.js"></script></head><body><body><div id="outer"> <div id="inner"> </div></div></body><script>var parentDiv=document.getElementById("outer");parentDiv.addEventListener("mouseover", function () { console.log("The mouseover event of the parent div is triggered");},false);//parentDiv.addEventListener("mouseenter", function () {// console.log("The mouseenter event of the parent div is triggered");//},false);//parentDiv.addEventListener("mouseout", function () {// console.log("The mouseout event of the parent div is triggered");//},false);//parentDiv.addEventListener("mouseleave", function () {// console.log("The mouseleave event of the parent div is fired");//},false);</script></body></html>note:
mouseover corresponds to mouseout, mouseenter corresponds to mouseleave. The effect can be uncommented in the above code.
The hover API in jquery combines mouseenter and mouseleave to use.
3. Left and right mouse buttons
<script type="text/javascript">document.onmousedown=function (ev){ var oEvent=ev||event; alert(oEvent.button);// The left mouse button in IE is 1, the right mouse button is 2, and the left mouse button in ff and the right mouse button in chrome is 0, the right mouse button is 2};</script>4. The difference between mouseover and mousemove
Generally speaking, mouseover is enough, but mousemove is used only in special circumstances. mousemove is more resource-consuming, such as monitoring the changes in mouse coordinates.
The above is the JavaScript event learning summary introduced to you by the editor (V) related knowledge about mouse events of event types in js. I hope it will be helpful to everyone!