a) mouse events
Mouse events may be the most commonly used event in a Web page, because the mouse is the most commonly used navigation device, and 9 mouse events are defined on the DOM3 level event, respectively:
Click: When the user clicks on the primary mouse button usually refers to the left mouse button or press Enter the trigger.
Dbclick: Triggered when the user double-clicks the mouse primary key, the event was not defined in the DOM2 level event but was generally supported and later normalized at the DOM3 level.
MouseDown: When the user presses any of the mouse button will trigger, this event is not able to trigger through the keyboard.
MouseEnter: Triggers when the mouse icon is moved from outside the element to the bounds of the element. This event does not support bubbling, and it is triggered negatively when the mouse moves over the top surface of the element. This event is not part of the DOM2 level event and is an event added after the DOM3 level, IE, ff9+, and opera support this event.
MouseLeave: When the mouse is over the element, and then move out of the element boundary is to trigger the event, the same as the MouseEnter event, does not support bubbling, is not triggered above the element, the event does not belong to the DOM2 level event, belong to the DOM3 level after the event added, IE, ff9+, And opera supports this event.
MouseMove: A repeat trigger when the mouse moves around an element that cannot be triggered by a keyboard event.
Mouseout: Triggered when the mouse is over an element and then moved above the other element. Element is moved outside the bounds of the original element, or on the child elements of the original element, this event cannot be triggered by the keyboard.
MouseOver: Triggered when a user moves the mouse for the first time from outside the bounds of an element to the bounds of the element, the event cannot be triggered by the keyboard.
MouseUp: When the user releases the mouse button is triggered, this event cannot be triggered by the keyboard.
All elements on the page support mouse events, except MouseEnter and MouseLeave, all events are bubbling and their default behavior can be canceled. However, the default behavior of canceling mouse events may affect other events, because some mouse events are interdependent.
Only when a MouseDown event and a MouseUp event are triggered on the same element can the mouse click event be triggered, and if any one event is canceled, the Click event will never be triggered. Similar principle Dbclick events depend on the Click event, and Dbclick are not triggered if either of the two consecutive click events is canceled. The common mouse events are as follows:
1.mousedown, 2.mouseup, 3.click, 4.mousedown, 5.mouseup, 6.click, 7.dbclick.
Both the 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 ');
It is noteworthy, however, that there are some differences in the detection of DOM3-level events:
var issupport = document.implementation.hasFeature (' mouseevent ', ' 3.0 ');
The mouse event also contains a subclass event, the wheel event (the wheel event). The wheel event contains only one event, MouseWheel event, which responds to the mouse wheel or other devices, such as Mac Touchpad.
b) Associated elements
For the mouseover and mouseout events, there is also an event-related element, and the actions performed by the event include moving the mouse from one element boundary to the other within the bounds of another element. Taking the MouseOver event as an example, his main target element is the element that the mouse will move to, and the associated element is the element that loses the mouse. Also for the Mouseout event, the primary goal is the mouse-moving element, and the associated element is the element that obtains the mouse, and the DOM provides information about the associated element through the Relatedtarget attribute on the event object. IE8 or earlier versions of IE do not support relatedtarge properties, but they provide fromelement properties and Toelement properties that are similar to their functions. Under IE, when the MouseMove event is triggered, the fromelement of the event object contains the associated element, and when the Mouseout event is triggered, the Toelement property of the event contains the associated element. All attributes are supported in IE9, and a cross-browser Getrelatedtarget method can write this:
Copy Code code 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 Triggers only when the mouse key clicks on an element (or when an element has the focus and presses the return key), and for MouseDown and MouseUp, there is a button on the event object, and he can determine which button is pressed or released. There are usually three possibilities for Button property values implemented in the DOM:
0: On behalf of the primary key,
1: On behalf of the rollers,
2: Deputy key.
In general, the primary key refers to the left mouse button, the secondary key on behalf of the right mouse button.
The Button property is also available from IE8, but it has a completely different range of values:
0: No button pressed,
1: The primary key has been pressed,
2: The deputy key has been pressed,
3: Primary key keys are pressed,
4: On behalf of the middle key is pressed,
5: On behalf of the primary key and middleware is pressed,
6: On behalf of the secondary key and the middle key is pressed,
7: On behalf of the three keys are pressed.
It is obvious that the range of the button attribute under the DOM model is much simpler than that of the IE model, and that the operation of IE is slightly abnormal.
d) Other event information
For event object events, the Detail property is also provided to provide more event information on the DOM2 level event, for example, for a click event, detail can record the number of clicks in the same pixel position, and the detail value is counted from 1, plus one after each click, If the mouse moves between MouseDown and MouseUp, this value will be zeroed.
About the mouse event to write these first, in the future slowly fill.
