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

Erfahren Sie, wie Sie ein Vue-Projekt mit Docker bereitstellen

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“

Erfahren Sie, wie Sie ein Vue-Projekt mit Docker bereitstellen

Dieser Artikel zeigt Ihnen, wie Sie CSS wie JS-Module importieren

Elegantere Verarbeitung von Datumsangaben in JavaScript basierend auf Day.js

Allgemeine Überlegungen zum Erstellen eines Hadoop 3.2.0-Clusters

MySQL extrahiert interne JSON-Felder und gibt sie als Zahlen aus.

So erstellen Sie schnell eine statische Website in der Alibaba Cloud

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.25

Verwendung des Linux-Stat-Befehls

Das WeChat-Applet Uniapp realisiert den Löscheffekt durch Wischen nach links (vollständiger Code)

Tutorial zum Migrieren von Projekten von MYSQL zu MARIADB

Artikel empfehlen

So führen Sie ein Python-Skript auf Docker aus

Tutorial zur Installation von MySQL 8.0.11 unter Linux

Detaillierte Erklärung des Unterschieds zwischen Cellspacing und Cellpadding in der Tabelle

Detaillierte Erläuterung der Funktionen und Methoden des Vue3-Lebenszyklus

Django verwendet Pillow, um einfach eine Verifizierungscodefunktion einzurichten (Python)

So verweisen Sie auf jQuery in einer Webseite

JavaScript-Implementierung eines Karussellbeispiels

MySQL 5.7 Installations- und Konfigurations-Tutorial unter CentOS7 64 Bit

So konfigurieren Sie MySQL auf einem Ubuntu 16.04-Server und aktivieren die Remote-Verbindung

Detaillierte Erläuterung der Verwendung des Alibaba Cloud-Image-Repository zum Erstellen ausländischer Docker-Images

JS-Implementierung des Apple-Rechners

15 Vim-Kurzreferenztabellen, die Ihnen helfen, Ihre Effizienz um das N-fache zu steigern

So erhalten und verwenden Sie die Zeit im Linux-System

Schritte zum Installieren einer RocketMQ-Instanz unter Linux

So legen Sie die Umgebungsvariable PATH im Linux-System fest (3 Methoden)