suchen

Heim >Web-Frontend >js-Tutorial >Einführung in JavaScript-Ereignisse_Javascript-Kenntnisse

Einführung in JavaScript-Ereignisse_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 16:04:301518Durchsuche

JavaScript-Ereignisse sind eine Reihe von Vorgängen, die durch Benutzer verursacht werden, die auf eine Webseite zugreifen;
Beispiel: Der Benutzer klickt; wenn der Benutzer bestimmte Vorgänge ausführt, wird eine Reihe von Codes ausgeführt

1 Veranstaltungseinführung

Ereignisse werden im Allgemeinen zur Interaktion zwischen Browsern und Benutzervorgängen verwendet. Sie erschienen zuerst im IE und Netscape Navigator als Mittel zur Aufteilung der serverseitigen Rechenlast Die DOM2-Level-Spezifikation begann mit dem Versuch, DOM-Ereignisse auf logische Weise zu standardisieren;

IE9/Firefox/Opera/Safari und Chrome haben alle den Kernteil des Moduls „DOM2-Level-Ereignisse“ implementiert; Browser vor IE8 verwenden immer noch ihr proprietäres Ereignismodell;
JavaScript verfügt über drei Ereignismodelle: Inline-Modell/Skriptmodell und DOM2-Modell;


2 Inline-Modell (HTML-Ereignishandler)

Dieses Modell ist die traditionellste und einfachste Art, mit Ereignissen umzugehen; Im Inline-Modell ist der Event-Handler ein Attribut des HTML-Tags, das zur Verarbeitung bestimmter Ereignisse

verwendet wird Obwohl Inline in den frühen Tagen häufiger verwendet wurde, wurde es mit HTML vermischt und nicht von HTML getrennt;


Verwenden Sie die Event-Handler-Funktion als Attribut in HTML, um JS-Code auszuführen;
Achten Sie auf einfache und doppelte Anführungszeichen;

Verwenden Sie Ereignisbehandlungsfunktionen als Attribute in HTML, um JS-Funktionen auszuführen;

PS: Die Funktion darf nicht in window.onload platziert werden, sonst ist sie nicht sichtbar


Drei Skriptmodelle (DOM-Level-0-Ereignishandler)

Vier Ereignisverarbeitungsfunktionen

//Die Ereignistypen, die JavaScript verarbeiten kann, sind: Mausereignisse/Tastaturereignisse/HTML-Ereignisse;
JavaScript-Ereignisbehandlungsfunktionen und ihre Verwendungsliste
Event-Handler-Funktion Betroffene Elemente Wenn auftritt
onabort image Wenn das Laden des Bildes unterbrochen wird;
onunschärfe Fenster/Rahmen/alle Formobjekte, wenn sich der Fokus vom Objekt wegbewegt;
onchange Eingabefeld/Auswahlfeld/Textfeld Wenn der Wert eines Elements geändert wird und der Fokus verloren geht;
Onclick-Link/Schaltfläche/Formularobjekt/Bild usw. Wenn der Benutzer auf das Objekt klickt;
ondblclick Link/Schaltfläche/Formularobjekt, wenn der Benutzer auf das Objekt doppelklickt;
onDragdrop-Fenster Wenn der Benutzer ein Objekt per Drag & Drop in das Browserfenster zieht;
onError window/frame/alle Formularobjekte, wenn im Skript ein Syntaxfehler auftritt;
onfocus window/frame/alle Formularobjekte Wenn mit der Maus geklickt oder die Mausbewegung auf das Fenster oder den Rahmen fokussiert wird;
onkeydown document/image/link/form, wenn die Taste gedrückt wird;
onkeypress document/image/connection/form Wenn die Taste gedrückt und dann losgelassen wird;
onkeyup document/image/link/form, wenn die Taste losgelassen wird;
Körper/Frameset/Bild laden, nachdem das Dokument oder Bild geladen wurde;
onunload body/frameset Nachdem das Dokument oder Frameset entladen wurde;
onmouseout link Wenn das Symbol den Link entfernt;
onmouseover link Wenn sich die Maus über den Link bewegt;
onmove window Wenn sich das Browserfenster bewegt;
onreset Formular-Reset-Schaltfläche Klicken Sie auf die Reset-Schaltfläche des Formulars;
onresize window Beim Ändern der Größe des Browserfensters;
onselect form element Bei der Auswahl eines Formularobjekts;
onsubmit form Beim Senden des Formulars an den Server;
// PS: Für jedes Ereignis gibt es einen eigenen Triggerbereich und eine eigene Methode, und die Ereignisverarbeitung ist ungültig

1. Mausereignisse können von allen Elementen auf der Seite ausgelöst werden

(1).click: Wird ausgelöst, wenn der Benutzer mit der Maustaste klickt oder die Eingabetaste drückt; ​ input.onclick = function(){

alarm('Lee');
};

(2).dblclick: Wird ausgelöst, wenn der Benutzer mit der Maustaste doppelklickt;

​ input.ondblclick = function(){

alarm('Lee');
}

(3).mousedown: Wird ausgelöst, wenn der Benutzer die Maus drückt, sie aber noch nicht nach oben bewegt hat; ​ input.onmousedown = function(){

alarm('Lee');

}

(4)Mouseup: wird ausgelöst, wenn der Benutzer die Maustaste loslässt;
​ input.onmouseup = function(){

alarm('Lee');

}

(5).mouseover: Wird ausgelöst, wenn sich die Maus über ein Element bewegt; ​ input.onmouseover = function(){
alarm('Lee');

}


(6).mouseout: Wird ausgelöst, wenn sich die Maus aus einem Element bewegt; ​ input.onmouseout = function(){
alarm('Lee');
}

(7).mousemove: Wird ausgelöst, wenn sich der Mauszeiger über das Element bewegt; ​ input.onmousemove = function(){
alarm('Lee');
}

2. Tastaturereignisse


(1).keydown: Wird ausgelöst, wenn der Benutzer eine beliebige Taste auf der Tastatur drückt. Wenn sie gedrückt und gedrückt gehalten wird, wird sie wiederholt ausgelöst onkeydown = function(){

alarm('Lee'); }
(2).Tastendruck: Wird ausgelöst, wenn der Benutzer eine Zeichentaste auf der Tastatur drückt. Wenn sie gedrückt und gedrückt gehalten wird, wird sie wiederholt ausgelöst onkeypress = function(){

alarm('Lee');

}

(3).keyup: Wird ausgelöst, wenn der Benutzer eine Taste auf der Tastatur loslässt;
onkeyup = function(){

alarm('Lee');

}


3.HTML-Ereignisse



(1).load: Wenn die Seite vollständig geladen ist (einschließlich aller Bilder/JavaScript-Dateien/CSS-Dateien und anderer externer Ressourcen), wird das Ladeereignis im Fenster ausgelöst;
window.onload = function(){

alarm('Lee');

}
// Das Ladeereignis kann auch für Bilder ausgelöst werden, unabhängig davon, ob es sich um ein Bildelement im DOM oder ein Bildelement in HTML handelt // Sie können also einen Onload-Ereignishandler für jedes Bild in HTML angeben;

// PS: Der Download neuer Bildelemente beginnt nicht unbedingt, nachdem sie dem Dokument hinzugefügt wurden. Solange das src-Attribut festgelegt ist, wird der Download gestartet

// Das