Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er stellt hauptsächlich verwandte Themen zu gängigen JavaScript-Ereignistypen vor, einschließlich Mausereignissen, Tastaturereignissen usw. Ich hoffe, dass er für alle hilfreich ist .
【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend】
Mausereignis
Ereignistyp
- Klick: Der Benutzer klickt mit der Hauptmaustaste (normalerweise die linke Maustaste).
- dblclick: Wird ausgelöst, wenn der Benutzer auf die Hauptmaustaste doppelklickt (Häufigkeit hängt von der Systemkonfiguration ab)
- mousedown: Wird ausgelöst, wenn der Benutzer eine beliebige Maustaste drückt
- mouseup : Wird ausgelöst, wenn der Benutzer die Maus anhebt. Wird ausgelöst, wenn eine Taste gedrückt wird
- mousemove: Wird ausgelöst, wenn sich die Maus über das Element bewegt.
- mouseover: Wird ausgelöst, wenn die Maus das Element betritt Mouseenter: Wird ausgelöst, wenn die Maus das Element betritt, dieses Ereignis wird nicht sprudeln.
- Mouseleave: Wird ausgelöst, wenn die Maus das Element verlässt, das Ereignis wird nicht sprudeln Das untergeordnete Element, das vom übergeordneten Element zum untergeordneten Element wechselt, gilt für das übergeordnete Element immer noch als Verlassen
- enter und verlassen, unter Berücksichtigung untergeordneter Elemente sind untergeordnete Elemente immer noch Teil des übergeordneten Elements
- mouseenter und mouseleave tun keine Blase
Ereignisobjekt
alle Mausereignisse, Ereignishandler Die Ereignisobjekte sind alle MouseEvent-
- altKey: Wenn das Ereignis ausgelöst wird, ob die Alt-Taste der Tastatur gedrückt wird
- ctrlKey: Wann Das Ereignis wird ausgelöst, unabhängig davon, ob die Strg-Taste der Tastatur gedrückt wird
Umschalttaste: Wenn das Ereignis ausgelöst wird, wird die Alt-Taste gedrückt. Drücken Sie die Umschalttaste auf der Tastatur
Taste: Wenn das Ereignis ausgelöst wird, die Maustaste Typ0: Linke Taste
1: Mittlere Taste
2: Rechte Taste
-
-
- Position
-
-
- Seite: SeiteX, SeiteY, die horizontalen und vertikalen Koordinaten des aktuellen Mausabstands vom Seite
- client: clientX, clientY, die Koordinaten der Maus relativ zum Ansichtsfenster
offset: offsetX, offsetY, die Koordinaten der Maus relativ zum Abstand der Ereignisquelle
screen: screenX , screenY, die Maus ist relativ zum Bildschirm
x, y, äquivalent zu clientX, clientYBewegung: BewegungX, BewegungY, nur gültig bei Mausbewegungsereignissen, relativ zur letzten Mausposition, Versatzabstand
Tastaturereignisse -
- Ereignistyp
-
-
- keydown: Wird ausgelöst, wenn eine beliebige Taste auf der Tastatur gedrückt wird. Wenn gedrückt, wird dieses Ereignis wiederholt ausgelöst.
- keypress: Wird ausgelöst, wenn eine
Zeichentaste
auf der Tastatur gedrückt wird.
keyup: Anheben einer beliebigen Taste Die Tastatur löst
keydown, keypress aus. Wenn das Standardverhalten des Ereignisses blockiert ist, wird der Text nicht angezeigt.
Event-Objekt-
- KeyboardEvent
- Code: Holen Sie sich die Tastenfolge und passen Sie sie an das Tastaturlayout an.
key: Ruft die Tastenfolge ab, nicht für das Tastaturlayout geeignet. Kann gedruckte Zeichen erhalten.
keyCode, der: den Tastaturcode abruft
Form-Ereignis
- Fokus: Wird ausgelöst, wenn das Element fokussiert ist (Elemente, die mit dem Benutzer interagieren können, können fokussiert werden), dieses Ereignis wird nicht angezeigt
- Unschärfe: Wird ausgelöst, wenn das Element den Fokus verliert. Dieses Ereignis wird nicht sprudeln.
- submit: Formularereignis senden, nur gültig in Formularelementen.
change: Textänderungsereignis
input: Textänderungsereignis, sofort ausgelöstAndere Ereignisse
window globales Objekt-
- load, DOMContentLoaded, readystatechange
- windowload: Alle Ressourcen auf der Seite wurden geladen Ereignis
- Bild laden: Ereignis, bei dem die Bildressource geladen wird
- Der Prozess des Browser-Renderings der Seite:
Den Quellcode der Seite abrufen
Dokumentknoten erstellen
- Fügen Sie von oben nach unten Elemente zum Dom-Baum hinzu wiederum: Jedes Mal, wenn ein Element hinzugefügt wird, werden beim Vor-Rendering die untergeordneten Knoten der Reihe nach entsprechend der Struktur gerendert. wird geladen (wird geladen), interaktiv (interaktiv), abgeschlossen (abgeschlossen)
interaktiv: DOMContentLoaded-Ereignis auslösen
vollständig: Ladeereignis des Fensters auslösen
readystatechange (wird ausgelöst, wenn sich der Seitenstatus ändert //zu dem geänderten Status zurückkehren)
js Der Code sollte so weit wie möglich am Ende der Seite geschrieben werden-
css sollte oben auf der Seite geschrieben werden: Um ein Flackern zu vermeiden (wenn es unten auf der Seite platziert wird, führt dies dazu, dass das Element zuerst keinen Stil hat, verwenden Sie dann den hässlichen Standardstil und dann Ändern Sie den Stil nach dem Lesen der CSS-Datei.)
-
JS sollte am Ende der Seite geschrieben werden: um ein Blockieren des nachfolgenden Renderns zu vermeiden und um zu vermeiden, dass die Elemente beim Ausführen von JS nicht auf der Seite angezeigt werden.
unload, beforeunload
beforeunload: Fensterereignis, wird ausgeführt, wenn das Fenster geschlossen ist, kann das Schließen des Fensters verhindern
entladen: Fensterereignis, wird ausgeführt, wenn das Fenster geschlossen ist
Wird ausgeführt, wenn das Fenster gescrollt wird. Ereignis
Mit scrollTop und scrollLeft können Sie den Scrollabstand ermitteln und festlegen.
Ereignisse werden ausgeführt, wenn sich die Fenstergröße ändert, und überwachen die Größe des Ansichtsfensters
Schnitt
OffsetParent
Erhalten Sie das erste Element eines bestimmten Elements Das positionierte Vorgängerelement, falls keines vorhanden ist, dann Get the offsetParent of body
body as null
offsetLeft, offsetTop // Der Abstand vom positionierten Element ist die Koordinate des offsetParent relativ zum Element
relativ zum ElementWenn offsetParent body ist, behandeln Sie es als Die gesamte Webseite
- getBoundingClientRect-Methode
Diese Methode ruft ein Objekt ab, das den Abstand des Elements relativ zum Ansichtsfenster aufzeichnet.
Ereignissimulation.Klick simuliert Klick Simulationsereignis-
Andere Ergänzungen
window.scrollX, window.pageXOffset, window.scrollY, window.pageYOffset
- window.scrollX, window.pageXOffset: entspricht dem scrollLeft des Stammelements
window.scrollY, window .pageYOffset: Entspricht dem scrollTop des Stammelements
scrollTo, scrollByscrollTo: Position der Bildlaufleiste festlegen //window.scrollTo(x, y) Alle DOM-Objekte können verwendet werden scrollBy: bedeutet, dass x erhöht wird die ursprüngliche Basis und der Y-Achsen-Abstand window.scrollBy(x, y)
- resizeTo, resizeBy
- [Verwandte Empfehlungen:
- Javascript-Video-Tutorial
,
Web-Frontend]
Das obige ist der detaillierte Inhalt vonOrganisieren gängiger Ereignistypen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
