a) Mouse Event
Mouse events may be the most commonly used event on web pages, because the mouse is the most commonly used navigation device. There are 9 mouse events defined on DOM3 level events, namely:
click: When the user clicks the primary mouse button, it usually refers to the left mouse button or press Enter.
dbclick: Triggered when the user double-clicks the primary key of the mouse. This event is not defined in the DOM2 level event but is generally supported. Later, it was standardized in the DOM3 level.
mousedown: When the user presses any key on the mouse, it will trigger, and this event cannot be triggered through the keyboard.
mouseenter: Triggered when the mouse icon moves from outside the element to inside the element boundary. This event does not support bubbles and is negatively triggered when the mouse moves on the upper surface of the element. This event does not belong to the DOM2 level event, but is an event added after the DOM3 level. IE, FF9+, and opera support this event.
mouseleave: When the mouse is above the element and then moves out of the element boundary, this event is triggered. It is the same as the mouseenter event. It does not support bubbles. It is not triggered above the element. This event does not belong to the DOM2 level event, but is an event added after DOM3 level. IE, FF9+, and opera support this event.
mousemove: Repeated triggering when the mouse moves around an element, the event cannot be triggered by a keyboard event.
mouseout: Triggered when the mouse is above an element and then moves above other elements. The element moves outside the boundary of the original element, or on the child elements of the original element, and this event cannot be triggered by the keyboard.
mouseover: This event cannot be triggered by the keyboard when the user moves the mouse from outside the boundary of an element for the first time.
mouseup: When the user releases the mouse button, this event cannot be triggered through the keyboard.
All elements on the page support mouse events, except mouseenter and mouseleave, all events are bubbling, and their default behavior can be cancelled. But canceling the default behavior of mouse events may affect other events because some mouse events are interdependent.
The mouse click event can only be triggered when a mousedown event and a mouseup event are fired on the same element; assuming that any event is cancelled, the click event will never be triggered. Similar principles The dbclick event depends on the click event. If any of the two consecutive click events is cancelled, the dbclick will not be triggered. Commonly used mouse events are as follows:
、、、、、、。
Whether it is a click or a dbclick event, it depends on the triggering of other events.
You can use the following code to determine whether the browser supports mouse events on dom2 events.
var isSupport = ('MouseEvents'，'2.0')；
However, it is worth noting that detection on dom3-level events is somewhat different:
var isSupport = ('MouseEvent','3.0');
The mouse event also contains a subclass event, namely the wheel event (roller event). The wheel event contains only one event, mousewheel event, which reflects the interaction of the mouse wheel or other devices such as the touchpad of the mac.
b) Associative elements
For mouseover and mouseout events, there are also elements related to the event. The actions performed by the event include moving the mouse from the inside of one element boundary to another element boundary. Taking the mouseover event as an example, its main target element is the element that the mouse will move to, and that associated element is the element that loses the mouse. Also for the mouseout event, the main goal is the element removed by the mouse, and the associated element is the element obtained by the mouse. The DOM provides information about the associated element through the relatedTarget attribute on the event object. IE8 or earlier versions do not support the relatedTarge attribute, but provide the fromElement attribute and toElement attribute similar to its functions. In IE, when the mousemove event is triggered, the fromElement of the event object contains the associated element. When the mouseout event is triggered, the toElement attribute of the event contains the associated element. All properties are supported in IE9. A cross-browser getRelatedTarget method can be written like this:
var eventUtil = {
getRelateTarget:function(event){
if () {
return ;
}else if(){
return ;
}else if(){
return ;
}else {
return null;
}
}
};
c)buttons
The click event will only be triggered when the mouse primary key clicks on an element (or press Enter when an element gains focus). For mousedown and mouseup, there is an attribute button on the event object event, which can determine which key is pressed or released. There are usually three possibilities for button attribute values implemented in DOM:
0: represents the primary key,
1: Represents the roller,
2: Represents the secondary key.
In general, the primary key refers to the left button of the mouse, and the secondary key represents the right button of the mouse.
Starting from IE8, the button attribute is also provided, but it has a completely different value range:
0: No button pressed,
1: The primary key has been pressed.
2: It means that the secondary key has been pressed.
3: Both the primary and secondary keys are pressed.
4: It means that the middle key is pressed.
5: means the primary key and middleware are pressed.
6: means that the secondary key and the intermediate key are pressed.
7: It means that all three keys are pressed.
It can be seen that the value range of the button attribute under the DOM model is much simpler than that under the IE model, and I personally think that the operation under ie is a bit abnormal.
d) Other event information
On the DOM2 level event, 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 position. The value of detail starts from 1, and adds one after each click. If the mouse moves between mousedown and mouseup, this value will be cleared.
Let’s write these first about mouse events and slowly complete them in the future.
Mouse events may be the most commonly used event on web pages, because the mouse is the most commonly used navigation device. There are 9 mouse events defined on DOM3 level events, namely:
click: When the user clicks the primary mouse button, it usually refers to the left mouse button or press Enter.
dbclick: Triggered when the user double-clicks the primary key of the mouse. This event is not defined in the DOM2 level event but is generally supported. Later, it was standardized in the DOM3 level.
mousedown: When the user presses any key on the mouse, it will trigger, and this event cannot be triggered through the keyboard.
mouseenter: Triggered when the mouse icon moves from outside the element to inside the element boundary. This event does not support bubbles and is negatively triggered when the mouse moves on the upper surface of the element. This event does not belong to the DOM2 level event, but is an event added after the DOM3 level. IE, FF9+, and opera support this event.
mouseleave: When the mouse is above the element and then moves out of the element boundary, this event is triggered. It is the same as the mouseenter event. It does not support bubbles. It is not triggered above the element. This event does not belong to the DOM2 level event, but is an event added after DOM3 level. IE, FF9+, and opera support this event.
mousemove: Repeated triggering when the mouse moves around an element, the event cannot be triggered by a keyboard event.
mouseout: Triggered when the mouse is above an element and then moves above other elements. The element moves outside the boundary of the original element, or on the child elements of the original element, and this event cannot be triggered by the keyboard.
mouseover: This event cannot be triggered by the keyboard when the user moves the mouse from outside the boundary of an element for the first time.
mouseup: When the user releases the mouse button, this event cannot be triggered through the keyboard.
All elements on the page support mouse events, except mouseenter and mouseleave, all events are bubbling, and their default behavior can be cancelled. But canceling the default behavior of mouse events may affect other events because some mouse events are interdependent.
The mouse click event can only be triggered when a mousedown event and a mouseup event are fired on the same element; assuming that any event is cancelled, the click event will never be triggered. Similar principles The dbclick event depends on the click event. If any of the two consecutive click events is cancelled, the dbclick will not be triggered. Commonly used mouse events are as follows:
、、、、、、。
Whether it is a click or a dbclick event, it depends on the triggering of other events.
You can use the following code to determine whether the browser supports mouse events on dom2 events.
var isSupport = ('MouseEvents'，'2.0')；
However, it is worth noting that detection on dom3-level events is somewhat different:
var isSupport = ('MouseEvent','3.0');
The mouse event also contains a subclass event, namely the wheel event (roller event). The wheel event contains only one event, mousewheel event, which reflects the interaction of the mouse wheel or other devices such as the touchpad of the mac.
b) Associative elements
For mouseover and mouseout events, there are also elements related to the event. The actions performed by the event include moving the mouse from the inside of one element boundary to another element boundary. Taking the mouseover event as an example, its main target element is the element that the mouse will move to, and that associated element is the element that loses the mouse. Also for the mouseout event, the main goal is the element removed by the mouse, and the associated element is the element obtained by the mouse. The DOM provides information about the associated element through the relatedTarget attribute on the event object. IE8 or earlier versions do not support the relatedTarge attribute, but provide the fromElement attribute and toElement attribute similar to its functions. In IE, when the mousemove event is triggered, the fromElement of the event object contains the associated element. When the mouseout event is triggered, the toElement attribute of the event contains the associated element. All properties are supported in IE9. A cross-browser getRelatedTarget method can be written like this:
Copy the codeThe code is as follows:
var eventUtil = {
getRelateTarget:function(event){
if () {
return ;
}else if(){
return ;
}else if(){
return ;
}else {
return null;
}
}
};
c)buttons
The click event will only be triggered when the mouse primary key clicks on an element (or press Enter when an element gains focus). For mousedown and mouseup, there is an attribute button on the event object event, which can determine which key is pressed or released. There are usually three possibilities for button attribute values implemented in DOM:
0: represents the primary key,
1: Represents the roller,
2: Represents the secondary key.
In general, the primary key refers to the left button of the mouse, and the secondary key represents the right button of the mouse.
Starting from IE8, the button attribute is also provided, but it has a completely different value range:
0: No button pressed,
1: The primary key has been pressed.
2: It means that the secondary key has been pressed.
3: Both the primary and secondary keys are pressed.
4: It means that the middle key is pressed.
5: means the primary key and middleware are pressed.
6: means that the secondary key and the intermediate key are pressed.
7: It means that all three keys are pressed.
It can be seen that the value range of the button attribute under the DOM model is much simpler than that under the IE model, and I personally think that the operation under ie is a bit abnormal.
d) Other event information
On the DOM2 level event, 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 position. The value of detail starts from 1, and adds one after each click. If the mouse moves between mousedown and mouseup, this value will be cleared.
Let’s write these first about mouse events and slowly complete them in the future.