Related reading:
JavaScript Event Learning Summary (v) Event type mouse events in JS
Http://www.jb51.net/article/86259.htm
JavaScript Event Learning Summary (i) Event flow
Http://www.jb51.net/article/86261.htm
A summary of JavaScript event Learning (iv) Public members of events (properties and methods)
Http://www.jb51.net/article/86262.htm
A summary of JavaScript event Learning (ii) JS event handler
Http://www.jb51.net/article/86264.htm
JavaScript Event Learning Summary (iii) JS event object
Mouse events
9 mouse events are defined in the DOM3 level event.
MouseDown: Triggers when the mouse button is pressed (left or right).
Cannot be triggered by the keyboard.
MouseUp: Triggers when the mouse button is released.
Cannot be triggered by the keyboard.
Click to trigger when clicking the left mouse button or pressing the ENTER key. This is important to ensure accessibility, meaning that the OnClick event handler can be executed either through the keyboard or through the mouse. DblClick: Triggers when the left mouse button is double-clicked. MouseOver: Mouse moves above the target element. Triggers when the mouse is moved over its descendant elements. Mouseout: The mouse removes the top of the target element.
MouseEnter: The mouse moves into an element-wide trigger, which is not bubbling, which is not triggered when the mouse moves over its descendant elements.
MouseLeave: Fires when the mouse moves out of an element range, which is not bubbling, which is not triggered when the mouse moves over its descendant elements.
MouseMove: The mouse is constantly triggered when it is moved inside the element.
Cannot be triggered by the keyboard.
Note
Triggering the MouseDown and MouseUp events successively on an element triggers the Click event. The DblClick event is triggered only after two click events have been triggered.
If one of the MouseDown or MouseUp is canceled, the Click event is not triggered. The Click event is canceled directly or indirectly, and the DblClick event is not triggered.
1, the sequence of events triggered
For example: by double-clicking the button, 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
Difference:
The MouseOver event bubbles, which means that the mouse is triggered when it moves over its descendant elements.
The MouseEnter event does not bubble, which means that the mouse is not triggered when it moves over its descendant elements.
Example:
Note
MouseOver corresponds to mouseout,mouseenter corresponding to MouseLeave. The effect can be removed from the comment on the code above.
The hover API in jquery is a combination of MouseEnter and MouseLeave.
3, left mouse button and right button
<script type= "Text/javascript" >
document.onmousedown=function (EV)
{
var oevent=ev| | event;
alert (Oevent.button);//IE the left mouse button is 1, right button is 2 FF and Chrome under the left mouse button is 0 right button is 2
};
</script>
4, the difference between mouseover and MouseMove
Under normal circumstances mouseover can be, special circumstances to use mousemove,mousemove more resources, such as to monitor the changes in mouse coordinates.
The above is a small set to introduce the JavaScript Event learning Summary (five) JS event type of mouse events related knowledge, hope to help everyone!