Javascript mouse and scroll wheel events

A) mouse events　　

Mouse events may be the most commonly used events on web pages. Because the mouse is the most commonly used navigation device, nine mouse events are defined for DOM3 events, respectively:

Click: It is triggered when you click the primary key of the mouse or press the Enter key.

Dbclick: A trigger occurs when you double-click the primary key of the mouse. This event is not defined in the DOM2 level event, but is widely supported. Later, it was standardized in the DOM3 level.

Mousedown: When you press any mouse key, this event cannot be triggered by the keyboard.

Mouseenter: triggered when the Mouse icon moves outside the element to the element boundary. This event does not support bubbling and is triggered when the mouse moves on the top of the element. This event is not a DOM2 event, but an event added after the DOM3 level. It is supported by IE, FF9 +, and opera.

Mouseleave: When the cursor is over the element, this event is triggered when the cursor is removed from the element boundary. It is the same as the mouseenter event and does not support bubbling. It is not triggered above the element, this event is not a DOM2 event, but an event added after the DOM3 level. It is supported by IE, FF9 +, and opera.

Mousemove: this event is repeatedly triggered when the mouse moves around an element. It cannot be triggered by a keyboard event.

Mouseout: triggered when you move the cursor over a certain element and move it over another element. The event cannot be triggered by a keyboard when the element is moved outside the boundary of the original element or the child element of the original element.

Mouseover: this event is triggered when you move the mouse cursor from outside the border of an element for the first time. This event cannot be triggered by a keyboard.

Mouseup: when you release the mouse button, this event cannot be triggered by the keyboard.

All elements on the page support mouse events. Except for mouseenter and mouseleave, all events are bubbling and Their default behavior can be canceled. However, canceling default mouse events may affect other events, because some mouse events are mutually dependent.

Only when a mousedown event and a mouseup event are triggered on the same element can the mouse click event be triggered. If any event is canceled, the click event will never be triggered. Similar Principle: The dbclick event depends on the click event. If any click event is canceled twice in a row, the dbclick event will not be triggered. Common mouse events are as follows:

1. mousedown, 2. mouseup, 3. click, 4. mousedown, 5. mouseup, 6. click, 7. dbclick.

Both click and dbclick events depend on the triggering of other events.

You can use the following code to determine whether the browser supports mouse events on the dom2 event,

Var isSupport = document. implementation. hasFeature ('mouseevents', '2. 0 ');

However, it is worth noting that the detection on dom3 events is somewhat different:

Var isSupport = document. implementation. hasFeature ('mouseevent', '3. 0 ');

A mouse event also contains a subclass event, namely a wheel event ). The wheel event contains only one event, the mousewheel event, which reflects the interaction of the mouse wheel or other devices, such as mac touchpad.

B) associated elements

For mouseover and mouseout events, there are still elements related to the event. The operations performed by these events include moving the mouse from the inside of one element boundary to the inside of another element boundary. Taking the mouseover event as an example, the main target element is the element to be moved by the mouse, and the correlated element is the one that loses the mouse. Similarly, for a mouseout event, the main goal is to move the mouse out of the element, while the correlated element is to get the mouse element. DOM provides the information of the correlated element through the relatedTarget attribute on the event object, IE8 or earlier versions of IE do not support the relatedTarge attribute, but provide the fromElement attribute and toElement attribute similar to its function. In IE, when the mousemove event is triggered, the fromElement of the event object contains the correlated element. When the mouseout event is triggered, the toElement attribute of the event contains the correlated element. All attributes are supported in IE9. A cross-browser getRelatedTarget method can be written as follows:
Copy codeThe Code is as follows:
Var eventUtil = {
GetRelateTarget: function (event ){
If (event. relatedTarget ){
Return event. relatedTarget;
} Else if (event. fromElement ){
Return event. fromElement;
} Else if (event. toElement ){
Return event. toElement;
} Else {
Return null;
}
}
};


C) buttons

The click event is triggered only when the mouse Primary Key clicks an element (or press the Enter key when an element gets the focus). For mousedown and mouseup, there is an attribute button on the event object, which can determine which key to press or release. There are three possible options for the button attribute values implemented in DOM:

0: indicates the primary key,

1: wheel,

2: represents the secondary key.

In general, the primary key refers to the left mouse button, and the secondary key represents the right mouse.

The button attribute is also provided from IE8, but it has a completely different value range:

0: No buttons are pressed,

1: The primary key has been pressed,

2: indicates that the secondary key has been pressed,

3: All primary key and secondary keys are pressed,

4: indicates that the intermediate key is pressed,

5: indicates that the primary key and middleware are pressed,

6: indicates that the secondary key and intermediate key are pressed,

7: indicates that all three keys are pressed.

It can be seen that the value range of the button attribute in the DOM model is much simpler than that in the IE model, and I personally think the operation in the ie model is slightly abnormal.

D) other event information

In DOM2 events, the event object event also provides the detail attribute to provide more event information. For example, for click events, detail can record the number of clicks at the same pixel location, the value of detail is counted from 1. Add one after each click. If the mouse moves between mousedown and mouseup, the value will be cleared.

Write down the mouse event first and complete it later.