Home > Developer > JavaScript
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.
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
