Organisieren gängiger Ereignistypen in JavaScript

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

• scrollen

Wird ausgeführt, wenn das Fenster gescrollt wird. Ereignis

Mit scrollTop und scrollLeft können Sie den Scrollabstand ermitteln und festlegen.

• Größe ändern

Ereignisse werden ausgeführt, wenn sich die Fenstergröße ändert, und überwachen die Größe des Ansichtsfensters

Ereignis kopieren

Schnitt

Mehrere Distanzbilder

Elementposition

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!