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

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

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

Artikel empfehlen

Erste Schritte mit der Konvertierung von Vue in React

Inhaltsverzeichnis Design Komponentenkommunikatio...

Best Practices für MySQL-Upgrades

MySQL 5.7 fügt viele neue Funktionen hinzu, wie z...

Beispielanalyse von MySQL-Start- und Verbindungsmethoden

Inhaltsverzeichnis So starten Sie mysqld Methode ...

Gängige Stile von CSS-Animationseffekten

Animation Definieren Sie eine Animation: /*Legen ...

So ändern Sie die Zeichensatzkodierung in MySQL 5.5/5.6 unter Linux auf UTF8

1. Melden Sie sich bei MySQL an und verwenden Sie...

JavaScript-Flusskontrolle (Verzweigung)

Inhaltsverzeichnis 1. Prozesskontrolle 2. Sequent...

Detailliertes Tutorial zur Installation von ElasticSearch 6.x im Docker

Ziehen Sie zuerst das Image (oder erstellen Sie e...

So richten Sie den Start einer JAR-Anwendung unter CentOS7 ein

Fallstricke bei der Projektimplementierung Beim B...

CSS fügt Scroll zu Div hinzu und verbirgt die Bildlaufleiste

CSS fügt dem div Scrollen hinzu und verbirgt die ...

Docker nginx Beispielmethode zum Bereitstellen mehrerer Projekte

Voraussetzungen 1. Docker wurde auf dem lokalen C...

Detaillierte Erläuterung der MySQL-Benutzer- und Berechtigungsverwaltung

Dieser Artikel beschreibt anhand von Beispielen d...

5 häufig verwendete Objekte in JavaScript

Inhaltsverzeichnis 1. JavaScript-Objekte 1).Array...