Detaillierte Erklärung der JavaScript-Ereigniskonzepte (Unterscheidung zwischen statischer und dynamischer Registrierung)

Inhaltsverzeichnis

Ereignisse in js
Ereignistyp
Häufige Ereignisse
Veranstaltungsregistrierung
Beispiele für statische und dynamische Registrierung

Onload-Ladeabschlussereignis

Statische Bindung:
Dynamische Bindung:

onclick Klickereignis

Statisches Bindungsereignis „onclick“
Dynamisches Bindungsereignis „onclick“

Ereignisse in js

Was ist ein Event? Ereignisse sind Reaktionen auf Interaktionen zwischen Computer-Eingabegeräten und Seiten, die wir Ereignisse nennen.

Ereignistyp

Mausklick: beispielsweise Klicken auf eine Schaltfläche, Auswählen eines Kontrollkästchens oder Optionsfelds; die Maus betritt einen Hotspot auf der Seite, schwebt darüber oder verlässt ihn: beispielsweise verharrt die Maus über einem Bild oder betritt eine Tabelle.
Tastaturtasten: wenn eine Taste gedrückt oder losgelassen wird;
HTML-Ereignisse: beispielsweise beim Laden des Seitentexts, beim Auswählen eines Eingabefelds in einem Formular oder beim Ändern des Textinhalts in einem Eingabefeld: beispielsweise wenn der Inhalt in einem Textfeld ausgewählt oder geändert wird,
Mutationsereignis: bezieht sich hauptsächlich auf das Ereignis, das ausgelöst wird, wenn sich die zugrunde liegenden Elemente des Dokuments ändern, z. B. DomSubtreeModified (Änderung des DOM-Teilbaums).

Häufige Ereignisse

Onload-Ladeabschlussereignis: Nachdem die Seite geladen wurde, wird es häufig zum Initialisieren des JS-Codes der Seite verwendet
Klickereignis „onclick“: wird häufig für Antwortvorgänge auf Schaltflächenklicks verwendet.
Onblur-Ereignis „Fokus verloren“: Wird allgemein verwendet, um zu überprüfen, ob der Eingabeinhalt zulässig ist, nachdem das Eingabefeld den Fokus verloren hat.
onchange-Ereignis zur Inhaltsänderung: Wird häufig für Vorgänge nach der Änderung des Inhalts der Dropdown-Liste und des Eingabefelds verwendet.
Onsubmit-Ereignis zur Formularübermittlung: Wird häufig verwendet, um vor der Übermittlung des Formulars zu überprüfen, ob alle Formularelemente zulässig sind.

Veranstaltungsregistrierung

Was ist eine (verbindliche) Veranstaltungsanmeldung?
Tatsächlich teilt es dem Browser mit, welcher Operationscode ausgeführt werden soll, wenn auf ein Ereignis reagiert wird. Dies wird als Ereignisregistrierung oder Ereignisbindung bezeichnet.
Die Ereignisregistrierung wird in eine statische und eine dynamische Registrierung unterteilt.

Statisches Registrierungsereignis: Weisen Sie den Code nach der Ereignisantwort direkt über das Ereignisattribut des HTML-Tags zu. Diese Methode wird als statische Registrierung bezeichnet.
Dynamisches Registrierungsereignis: Dies bedeutet, dass zuerst das DOM-Objekt des Tags über JS-Code abgerufen und dann der Code nach der Ereignisantwort über das DOM-Objekt zugewiesen wird. Ereignisname = function(){} Diese Form wird als dynamische Registrierung bezeichnet.

Grundlegende Schritte zur dynamischen Registrierung:

1. Holen Sie sich das Tag-Objekt
2. Tag-Objekt. Ereignisname = function(){}

Beispiele für statische und dynamische Registrierung

Onload-Ladeabschlussereignis

Statische Bindung:

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Statische Registrierung</title>
  <Skripttyp="text/javascript">
  // Onload-Ereignismethode Funktion onloadFun() {
   alert('Onload-Ereignis statisch registrieren, alle Codes');
   }
  </Skript>
</Kopf>
<!--Registrieren Sie das Onload-Ereignis statisch. Das Onload-Ereignis ist ein Ereignis, das automatisch ausgelöst wird, nachdem der Browser die Seite analysiert hat. Das Attribut des Body-Tags wird über dieses Attribut registriert-->
<body content="onloadFun();">
</body>
</html>

Dynamische Bindung:

Das Schreiben der Methode wurde korrigiert, indem die Methode window.onload(){} in geschweiften Klammern aufgerufen wurde.

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <title>Dynamische Registrierung</title>
  <Skripttyp="text/javascript">
   // Dynamische Registrierung des Onload-Ereignisses. Es handelt sich um eine feste Schreibmethode window.onload = function () {
   alert("Dynamisch registriertes Onload-Ereignis");
   }
  </Skript>
</Kopf>
<Text>
</body>
</html>

onclick Klickereignis

Anhand dieses Beispiels können wir beispielsweise den Unterschied zwischen den beiden Definitionen besser verstehen.

Statisches Bindungsereignis „onclick“

<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Skripttyp="text/javascript">
 Funktion onclickFun() {
  alert("Onclick-Ereignis statisch registrieren");
 }
</Skript>
</Kopf>
<Text>
<!--Registrieren Sie das onClick-Ereignis statisch über das onclick-Attribut der Schaltfläche-->
<button onclick="onclickFun();">Schaltfläche 1</button>
</body>
</html>

Dynamisches Bindungsereignis „onclick“

<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Titel</title>
<Skripttyp="text/javascript">
   fenster.onload = Funktion () {
   //getElementById ruft das Tag-Objekt über das ID-Attribut ab var btnObj = document.getElementById("btn01");
   // 2 durch das Tag-Objekt. Ereignisname = function(){}
   btnObj.onclick = Funktion () {
    alert("Dynamisch registriertes Onclick-Ereignis");
   }
   }
</Skript>
</Kopf>
<Text>
 
<button id="btn01">Schaltfläche 2</button>
</body>
</html>

Oben finden Sie den detaillierten Inhalt der detaillierten Erläuterung des Konzepts von JavaScript-Ereignissen (Unterscheidung zwischen statischer und dynamischer Registrierung). Weitere Informationen zu JavaScript-Ereignissen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:

Das Konzept und die Verwendung der Bereichskette in JavaScript
Zusammenfassung der grundlegenden Kenntnisse und Konzepte der objektorientierten JavaScript-Architektur
Das Konzept des Prozesses in node.js und das Anwendungsbeispiel des child_process-Moduls
Analyse des Konzepts und der Verwendung von Closures in JavaScript
Detaillierte Einführung in die Grundkonzepte von JS

<<: MySQL-Optimierung: Cache-Optimierung

>>: Linux verwendet iptables, um den Zugriff mehrerer IPs auf Ihren Server zu beschränken

Detaillierte Erklärung der Gründe, warum MySQL-Verbindungen hängen bleiben

Gemeinsame MySQL-Testpunkte für die Computerprüfung der zweiten Stufe 8 Methoden zur Optimierung des MySQL-Datenbankdesigns

8 Optimierungsmethoden für das MySQL-Datenbankdes...

Detaillierte Erklärung der JavaScript-Ereigniskonzepte (Unterscheidung zwischen statischer und dynamischer Registrierung)

Inhaltsverzeichnis

Ereignisse in js

Ereignistyp

Häufige Ereignisse

Veranstaltungsregistrierung

Beispiele für statische und dynamische Registrierung

Onload-Ladeabschlussereignis

Statische Bindung:

Dynamische Bindung:

onclick Klickereignis

Statisches Bindungsereignis „onclick“

Dynamisches Bindungsereignis „onclick“

Detaillierte Erklärung der Gründe, warum MySQL-Verbindungen hängen bleiben

So erhalten Sie den tatsächlichen Pfad des aktuellen Skripts in Linux

Detaillierte Erklärung des Konzepts, Prinzips und der Verwendung von MySQL-Triggern

Grundlegende Struktur von HTML-Dokumenten (Grundkenntnisse zur Erstellung von Webseiten)

Analyse eines MySQL-Deadlock-Szenariobeispiels

Detaillierte Erklärung zur Verwendung von $emit in Vue.js

CSS3 Flexible Box Flex, um ein dreispaltiges Layout zu erreichen

Lassen Sie uns kurz über die Änderungen im Setup in vue3.0 sfc sprechen

So verwenden Sie Binlog zur Datenwiederherstellung in MySQL

Beispiel für eine Methode zum Festlegen von MySQL-Fremdschlüsseln

Artikel empfehlen

Detaillierte Erläuterung der Docker Swarm-Dienstorchestrierungsbefehle

Detaillierte Erläuterung der Anwendungsszenarien von Filtern in Vue

Linux bestätigt, dass die Datendiskette deinstalliert wurde und ein neues benutzerdefiniertes Image erstellt werden kann

CSS, um den kleinen scharfen Eckeneffekt von Blasen zu erzielen

So zeigen Sie die Netzwerkroutingtabelle in Ubuntu an

Super ausführliches Tutorial zur Installation und Konfiguration von MySQL8.0.22

Detaillierte Erklärung, wie CocosCreator-Systemereignisse generiert und ausgelöst werden

So zeichnen Sie in CocosCreator ein cooles Radardiagramm

Ausführliche Erklärung zu MySQL vom Einstieg bis zum Aufgeben - Installation

So verwenden Sie cc.follow zur Kameraverfolgung in CocosCreator

Gemeinsame MySQL-Testpunkte für die Computerprüfung der zweiten Stufe 8 Methoden zur Optimierung des MySQL-Datenbankdesigns

Der gesamte Prozess der Installation und Konfiguration von Harbor1.7 auf CentOS7.5

Lösen Sie das Problem der Selbstinkrementierung des int-Primärschlüssels von MySQL

MySQL 5.7.18 Installations- und Konfigurations-Tutorial unter Windows

Untersuchen der Verwendung von Prozentwerten in der Eigenschaft „Hintergrundposition“