Erfahren Sie mehr über die am häufigsten verwendeten JavaScript-Ereignisse

Inhaltsverzeichnis

JavaScript-Ereignisse:

Häufig verwendete Ereignisse:
Ereignisaktionen

Zusammenfassen

JavaScript-Ereignisse:

Ein Ereignis bezieht sich auf die Ausführung bestimmten Codes, der ausgelöst wird, wenn bestimmte Komponenten bestimmte Vorgänge ausführen.

Häufig verwendete Ereignisse:

Eigentum	Trigger-Zeitpunkt
beim Abbrechen	Das Laden des Bildes wurde unterbrochen
aufunschärfe	Das Element verliert den Fokus
bei Änderung	Benutzer ändert den Inhalt eines Feldes
beim Klicken	Klicken Sie mit der Maus auf ein Objekt
Abonnieren	Doppelklicken Sie auf ein Objekt
bei Fehler	Beim Laden des Dokuments oder Bildes ist ein Fehler aufgetreten
auf Fokus	Das Element hat Fokus
beim Tastendruck	Eine Taste auf der Tastatur wird gedrückt
bei Tastendruck	Eine Taste auf der Tastatur wird gedrückt oder gedrückt gehalten
bei Tastendruck	Eine Taste auf der Tastatur wurde losgelassen
laden	Eine Seite oder ein Bild wurde vollständig geladen
beim Mausklick	Eine Maustaste wird gedrückt
bei Mausbewegung	Die Maus wird bewegt
bei Mausklick	Bewegen Sie die Maus von einem Element weg
beim Mouseover	Die Maus wird über ein Element bewegt
bei Mauszeiger	Eine Maustaste wird losgelassen
beim Zurücksetzen	Der Reset-Knopf wurde gedrückt
bei Größenänderung	Die Größe des Fensters oder Rahmens wird geändert
bei Auswahl	Text ist ausgewählt
bei Einreichung	Der Absenden-Button wird angeklickt
beim Entladen	Benutzer-Abmeldeseite

Ereignisaktionen

Bindungsereignisse

Methode 1 : Binden über das Ereignisattribut im Tag.

<Text>
<img id="img" src="upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up" onclick="up()">Zurück</button>&nbsp;
<button id="down" onclick="down()">Weiter</button>
</body>

<Skript>
    // Zeige die erste Funktion up() {
        let img = document.getElementById("img");
        img.setAttribute("src", "upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg")
    }
    //Zeige das zweite Bild function down() {
        let img = document.getElementById("img");
        img.setAttribute("Quelle", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")
    }
</Skript>

Methode 2 : Bindung über DOM-Elementattribute.

<Text>

<img id="img" src="upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg">
<br/>
<button id="up">Zurück</button>&nbsp;
<button id="down">Weiter</button>
</body>

<Skript>
    // Zeige die erste Funktion up() {
        let img = document.getElementById("img");
        img.setAttribute("src", "upload/2022/web/u=1582373193,2567665585&fm=26&gp=0.jpg")
    }

    lass s = document.getElementById("up");
    s.onclick = nach oben;

    //Zeige das zweite Bild function down() {
        let img = document.getElementById("img");
        img.setAttribute("Quelle", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic4.58cdn.com.cn%2Fp1%2Fbig%2Fn_v26f22be8b05a74c42b8f9dfb859480186.jpg%3Fw%3D425%26h%3D320&refer=http%3A%2F%2Fpic4.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618451421&t=0310ddbd6f7cd840299b10dd314572c8")
    }

    let x = document.getElementById("nach unten");
    x.onclick = nach unten;
</Skript>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:

Analyse des Ereignisschleifenmechanismus von JavaScript
JavaScript-Ereigniserfassungs-Blubbern und Erfassungsdetails
Detaillierte Erklärung der JS-Ereignisdelegation
Eine kurze Analyse von Event Bubbling und Event Capture in js
Fallstudie zu JavaScript-Ereignisschleifen
Detaillierte Erläuterung der Javascript-Ereigniserfassungs- und Bubbling-Methoden

<<: Eine kurze Analyse von CSS3 mithilfe von Textüberlauf zur Lösung von Textlayoutproblemen

>>: Lösung zur inkonsistenten Anzeige der Cursorgröße im Eingabefeld