Verwandte Lesungen:
JavaScript -Ereignis -Lernzusammenfassung (v) Mausereignis Typ in JS
//www.vevb.com/article/86259.htm
JavaScript -Ereignislernzusammenfassung (i) Ereignisfluss
//www.vevb.com/article/86261.htm
JavaScript -Event -Lernzusammenfassung (iv) öffentliche Ereignismitglieder (Eigenschaften und Methoden)
//www.vevb.com/article/86262.htm
JavaScript -Ereignis -Lernzusammenfassung (ii) JS -Ereignishandler
//www.vevb.com/article/86264.htm
JavaScript Event Learning Summary (iii) JS -Ereignisobjekt
Mausereignisse
9 Mausereignisse sind im DOM3 -Ereignis definiert.
MouseDown: Ausgelöst, wenn die Maustaste gedrückt wird (links oder rechts).
Kann nicht durch Tastatur ausgelöst werden.
MouseUp: Ausgelöst, wenn die Maustaste freigegeben wird und auftaucht.
Kann nicht durch Tastatur ausgelöst werden.
Klicken Sie: Ausgelöst, wenn Sie auf die linke Maustaste klicken oder die Eingabetaste drücken. Dies ist wichtig, um die Zugänglichkeit sicherzustellen, was bedeutet, dass der Onclick -Event -Handler sowohl über die Tastatur als auch über die Maus ausgeführt werden kann. DBLCLICK: Ausgelöst, wenn die linke Maustaste doppelklick ist. Mausover: Bewegen Sie die Maus über das Zielelement. Dies wird abfeuern, wenn sich die Maus über ihre Nachkommenelemente bewegt. Mausout: Maus entfernt das obige Zielelement.
Mouseenter: Die Maus bewegt sich in den Bereich des Elements und löst das Ereignis aus, das nicht sprudelt, dh sie löst nicht aus, wenn sich die Maus zu ihren Nachkommenelementen bewegt.
MOUSELEAVE: Ausgelöst, wenn sich die Maus aus dem Elementbereich heraus bewegt und das Ereignis nicht sprudelt, dh sie wird nicht ausgelöst, wenn sich die Maus zu ihren Nachkommenelementen bewegt.
Mousemove: Die Maus wird ständig ausgelöst, wenn sie sich im Element bewegt.
Kann nicht durch Tastatur ausgelöst werden.
Notiz:
Die MouseDown- und Mausup -Ereignisse werden nacheinander in einem Element ausgelöst, um das Klickereignis auszulösen. Das DBLCLICK -Ereignis wird nur ausgelöst, wenn zwei Klick -Ereignisse nacheinander abgefeuert werden.
Wenn einer von MouseDown oder MouseUp storniert wird, wird das Click -Ereignis nicht ausgelöst. Wenn das Klickereignis direkt oder indirekt abgebrochen wird, wird das DBLCLICK -Ereignis nicht ausgelöst.
1. Die Reihenfolge des Ereignisauslösens
Zum Beispiel: Doppelklicken Sie auf die Taste und schauen Sie sich das oben ausgelöste Ereignis an.
<body> <input id = "btn" type = "button" value = "klicken"/> <skript> var btn = document.getElementById ("btn"); Btn.AdDeVentListener ("MouseDown", Funktion (Ereignis) {console.log ("MouseDown");}, false); Btn.AdDeVentListener ("mauseup", function () {console.log ("mauseup");}, false); btn.addeventListener ("click", function () {console.log ("click");}, false); btn.addeventListener ("dblclick", function () {console.log ("dblclick");}, false); </script> </body>2. Der Unterschied zwischen Mausentrum und Mausover
der Unterschied:
Das Mausover -Ereignis wird sprudeln, was bedeutet, dass es feuern wird, wenn sich die Maus zu ihren Nachkommenelementen bewegt.
Das Mausenterereignis sprudelt nicht, was bedeutet, dass die Maus nicht feuert, wenn sie zu ihren Nachkommenelementen wechselt.
Zum Beispiel:
<! DocType html> <html> <head Lang = "en"> <meta charset = "utf-8"> <title> </title> <style> #outer {Position: absolut; Breite: 200px; Höhe: 200px; Top: 0; links: 0; unten: 0; Rechts: 0; Rand: Auto; Hintergrundfarbe: Pink; } #inner {Position: absolut; Breite: 100px; Höhe: 100px; Top: 50%; Links: 50%; Rand -Links: -50px; Hintergrundfarbe: Orange; Text-Align: Mitte; Zeilenhöhe: 100px; } #äußere, #Inner {Border-Radius: 50%; } </style> <script src = "jQuery-2.1.1.min.js"> </script> </head> <body> <body> <div id = "outer"> <div id = "Inner"> </div> </div> </body> <Script> var parentDiv = documentBy ("outer"); console.log ("Das Mausover -Ereignis des übergeordneten Divs wird ausgelöst");}, False); // parentdiv.addeventListener ("Mausenter", Funktion () {// console.log ("Das MausENTer -Ereignis des übergeordneten Divs ist ausgelöst"); //}, false). console.log ("Das Mausout -Ereignis des übergeordneten Divs wird ausgelöst"); //}, False); // parentdiv.addeventListener ("Mouseleave", function () {// console.log ("Das Mouseleave -Ereignis des übergeordneten Divs ist gefeuert"); //}, false);Notiz:
Mouseover entspricht Mausout, Mausenter entspricht Mouselave. Der Effekt kann im obigen Code unkontrolliert werden.
Die Hover -API in JQuery kombiniert Mousenter und Mouseleave, um sie zu verwenden.
3. Links- und Rechte Maustasten
<script type = "text/javaScript"> document.onmouseDown = function (ev) {var oevent = ev || Ereignis; Alert (Oevent.Button); // Die linke Maustaste in IE ist 1, die rechte Maustaste 2 und die linke Maustaste in FF und die rechte Maustaste in Chrom 0, die rechte Maustaste beträgt 2}; </script>4. Der Unterschied zwischen Mouseover und Mousemove
Im Allgemeinen reicht Mausover aus, aber Mousemove wird nur unter besonderen Umständen verwendet. MousEmove ist mehr ressourcenverbraucher, z. B. die Überwachung der Änderungen der Mauskoordinaten.
Das obige ist die Zusammenfassung der JavaScript -Event -Lernzusammenfassung, die Ihnen vom Editor (V) verwandte Kenntnisse über Mausereignisse von Ereignisstypen in JS vorgestellt wurde. Ich hoffe, es wird für alle hilfreich sein!