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

Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe

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“

Mehrere gängige Methoden für CSS-Layouts mit gleicher Höhe

Mehrere Möglichkeiten zur vertikalen und horizontalen Zentrierung in CSS3 mit unbestimmter Höhe und Breite

JavaScript-Farbbetrachter

Kompatibilität mit der Inline-Block-Eigenschaft

Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort vergessen?

So aktivieren Sie die MySQL-Remoteverbindung

Beschreibung der Standardtransaktionsisolationsebene von MySQL und Oracle

So implementieren Sie verteilte Transaktionen in MySQL XA

So debuggen Sie das Loader-Plugin in einem Webpack-Projekt

Was ist em? Einführung und Konvertierungsmethode von em und px

Artikel empfehlen

CSS3-Mauszeiger-Übergangszoomeffekt

JavaScript-Quellcode für Elimination

6 Möglichkeiten, die Maximal- und Minimalwerte eines Arrays in Javascript zu implementieren

Detaillierte Erläuterung des Implementierungsprozesses von Nginx zur Aktivierung des Brotli-Komprimierungsalgorithmus

Grundlegende Verwendung des Befehls wget unter Linux

Lösung für den ineffektiven globalen Stil der benutzerdefinierten Miniprogrammkomponente

Untersuchung der MySQL-Paging-Leistung

Detaillierte Einführung in den MySql-Index und korrekte Verwendungsmethode

So erweitern Sie die Kapazität der virtuellen Festplatte (VDI-Datei) von VirtualBox (grafisches Tutorial)

Nginx implementiert dynamische und statische Trennung Beispielerklärung

Sollte ich beim Erstellen einer Website die Kodierung UTF-8 oder GB2312 verwenden?

jQuery-Plugin zum Erreichen einer Bildunterbrechung

Tutorial zur Installation und Konfiguration von MySQL 5.7.16 ZIP-Paketen

Vue+Swiper realisiert Timeline-Effekt

MySQL 8.0.19 unterstützt die Sperrung eines Kontos nach dreimaliger Eingabe eines falschen Passworts (Beispiel)