First, the incident
Ii. Flow of events
See the following: JavaScript event (i) Event flow
Third, event processing procedures
Four, IE event processing program
See JavaScript event (ii) event handlers for the above contents
V. Event object
See JavaScript Event (iii) event object for the above contents
Vi. Public members of event objects
See JavaScript events (iv) Public members of event
Seven, mouse events
9 mouse events are defined in the DOM3 level event.
- MouseDown: Triggered 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: Triggers when the left mouse button is clicked or the ENTER key is pressed. This is important to ensure accessibility, which means that the OnClick event handler can be executed either by the keyboard or by the mouse.
- DblClick: Triggered when the left mouse button is double-clicked.
- MouseOver: Mouse moves over the target element. Fires when the mouse moves over its descendant elements.
- Mouseout: The mouse removes the target element.
- MouseEnter: The mouse moves within the bounds of the element, and the event does not bubble , which is not triggered when the mouse moves over its descendant elements.
- MouseLeave: Triggered when the mouse moves out of the range of elements, the event does not bubble , that is, the mouse moves to its descendant elements when it is not triggered.
- MouseMove: The mouse is constantly triggered as it moves inside the element. Cannot be triggered by the keyboard.
Note:
The Click event is triggered only if the MouseDown and MouseUp events are triggered successively on an element. The DblClick event is triggered only after the Click event has been triggered two times.
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. Sequence of event firings
Example: by double-clicking the button, look at the event triggered above.
<Body><inputID= "BTN"type= "button"value= "click"/><Script> varbtn=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>
View Code
2. The difference between MouseEnter and mouseover
Difference:
The MouseOver event bubbles, which means that it fires when the mouse moves over its descendant elements.
The MouseEnter event does not bubble, which means that it does not fire when the mouse moves over its descendant elements.
Example:
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title> <style>#outer{position:Absolute;width:200px;Height:200px;Top:0; Left:0;Bottom:0; Right:0;margin:Auto;Background-color:Pink; }#inner{position:Absolute;width:100px;Height:100px;Top:50%; Left:50%;Margin-left:-50px;Margin-top:-50px;; Background-color:Orange;text-align:Center;Line-height:100px; }#outer, #inner{Border-radius:50%; } </style> <Scriptsrc= "Jquery-2.1.1.min.js"></Script></Head><Body><Body><DivID= "outer"> <DivID= "inner"> </Div></Div></Body><Script>varParentdiv=document.getElementById ("outer");p Arentdiv.addeventlistener ("mouseover", function() {Console.log ("the MouseOver event of the parent Div is triggered");},false);//Parentdiv.addeventlistener ("MouseEnter", function () {//Console.log ("The MouseEnter event of the parent Div is triggered");//},false);//Parentdiv.addeventlistener ("Mouseout", function () {//Console.log ("The Mouseout event of the parent Div is triggered");//},false);//Parentdiv.addeventlistener ("MouseLeave", function () {//Console.log ("The MouseLeave event of the parent Div is triggered");//},false);</Script></Body></HTML>
View Code
Note:
MouseOver corresponds to mouseout,mouseenter corresponding to MouseLeave. The effect can be removed from the comments on the above code.
The hover API in jquery is used to combine MouseEnter and mouseleave together.
Cond...
JavaScript event (v) Event type mouse event