JavaScript Event Learning Summary (V) event type in JS mouse event _javascript Tips

Source: Internet
Author: User

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:

<! DOCTYPE html>  

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.