Umgang mit der Ereignisbehandlung in JavaScript (Beispiele und alle)

In diesem Blog werde ich versuchen, die Grundlagen des Ereignisbehandlungsmechanismus in JavaScript ohne die Hilfe einer externen Bibliothek wie Jquery / React / Vue zu verdeutlichen.

Ich werde die folgenden Themen in diesem Artikel erklären:

  1. Das Dokument und die Fensterobjekte sowie das Hinzufügen von Ereignis-Listenern .
  2. Die Event.preventDefault () -Methode und ihre Verwendung.
  3. Die Event.stopPropagation () -Methode mit einem Beispiel.
  4. So entfernen Sie einen Ereignis- Listener aus einem Element.

Dokument- und Fensterobjekte mit Ereignis-Listenern

Das Fensterobjekt repräsentiert die Registerkarte. Wenn Sie diesen Blog in Ihrem entsprechenden Browser lesen, repräsentiert Ihre aktuelle Registerkarte das Fensterobjekt.

Das Fensterobjekt hat Zugriff auf Informationen wie Symbolleiste, Höhe und Breite des Fensters, Eingabeaufforderungen und Warnungen. Lassen Sie uns sehen, wie wir dem Fensterobjekt einen Ereignis-Listener (Mousedown) hinzufügen und einige seiner Eigenschaften analysieren können.

So fügen Sie den Listener zum Fensterobjekt hinzu

Die addEventListener Methode ist die am meisten bevorzugte Art und Weise einen Ereignis - Listener hinzuzufügen Fenster , Dokument oder ein anderes Element in dem DOM.

Es gibt noch eine weitere Möglichkeit, die als "on" -Eigenschaft onclick, onmouseover usw. bezeichnet wird. Dies ist jedoch nicht so nützlich, da nicht mehrere Ereignis-Listener zum selben Element hinzugefügt werden können. Die anderen Methoden erlauben es.

Ein Ereignisobjekt wird als Argument (optional) an den Handler übergeben, der alle Informationen zum Ereignis (in unserem Fall Mousedown) im Fenster enthält.

Öffnen Sie die Entwicklertools (Inspect Element) auf dieser Seite, kopieren Sie den folgenden Code, fügen Sie ihn in das Konsolenfenster ein und drücken Sie die Eingabetaste.

window.addEventListener("mousedown",function(event){ alert("window"); console.log(event); });

Danach können Sie zu einem beliebigen Abschnitt der aktuellen Registerkarte wechseln und mit der rechten Maustaste klicken , um die Konsole und die Informationen zu diesem Ereignis anzuzeigen, wie unten im Schnappschuss gezeigt.

Hinweis : Wenn Sie zu einer anderen Registerkarte wechseln und mit der rechten Maustaste klicken, wird dieses Ereignis nicht ausgelöst, da es nur zu dieser Registerkarte (Fensterobjekt) gehört.

Die Details des Mousedown-Ereignisses

In den nächsten Zeilen werde ich einige der wichtigen erfassten Eigenschaften erläutern , die dem gerade durchgeführten Mousedown- Ereignis entsprechen .

Schaltfläche : Da dies das Mousedown-Ereignis war, wird Ihnen die Schaltfläche angezeigt, auf die Sie geklickt haben. Bei der Maus entsprechen Links, Mitte und Rechts 0, 1 bzw. 2. Wenn Sie auf die rechte Schaltfläche klicken, sehen Sie den Wert 2.

clientX und clientY : Position relativ links oben im Inhaltsbereich (Ansichtsfenster). Analysieren Sie einfach den Wert dieser Eigenschaften mit der Stelle, auf die Sie geklickt haben, und Sie können sehen, wie sie zusammenhängen. Auch wenn Sie die Seite nach unten scrollen, bleiben diese Eigenschaften gleich. ScreenX- und ScreenY-Referenz oben links auf dem Bildschirm (Monitor).

altkey / ctrlkey : Wenn Sie während des Rechtsklickvorgangs eine dieser Tasten gedrückt halten, können Sie sehen, dass diese Werte wahr sind. Ansonsten sind sie falsch wie in unserem Fall.

Ziel: Es entspricht dem Element, für das Sie die Aktion ausgeführt haben. Unabhängig davon, auf welches Element Sie geklickt haben, werden die dieser Eigenschaft entsprechenden Informationen in der Konsole angezeigt

Was ist ein Dokumentobjekt ?

Das Dokument besteht aus dem, was sich im inneren Fenster befindet. Das Dokument - Objekt ist die Wurzel von jedem Knoten in dem DOM. Wenn Sie eine HTML-Seite in den Browser laden, repräsentiert das Dokument die gesamte Seite.

Die Event.preventDefault () -Methode und ihre Verwendung

Manchmal möchten wir nicht, dass sich ein HTML-Element so verhält, wie es sich standardmäßig verhalten soll. In einem solchen Fall können wir diese Methode verwenden.

Beispiel : Durch Klicken auf das Ankerelement wird der Browser standardmäßig auf diese Seite umgeleitet. Versuchen wir das zu vermeiden.

  Google  let link = document.querySelector("a"); // It is the method to access the first matched element link.addEventListener("click", function(event) { console.log("Redirecting Stopped"); event.preventDefault(); });   

Sie können eine HTML-Datei erstellen und diesen Code auschecken.

Die Event.stopPropagation () -Methode

Ereignisse fließen nach außen. Es gibt bestimmte Fälle, z. B. wenn Sie verschachtelte Elemente haben und ein Ereignis für ein untergeordnetes Element ausführen und am Ende auch eine Aktion für das übergeordnete Element ausführen, die Sie vermeiden möchten. In solchen Fällen ist diese Methode nützlich.

Es klingt etwas verwirrend, aber ich hoffe, das folgende Beispiel wird es Ihnen klar machen.

Stellen Sie sich vor, Sie haben eine Schaltfläche in einem Absatz und haben beiden ein Mousedown-Ereignis zugeordnet. Sie möchten folgende Anwendungsfälle erreichen:

  1. Wenn Sie mit der rechten Maustaste auf die Schaltfläche klicken, sollte angezeigt werden, dass darauf geklickt wurde und nicht an das übergeordnete Element (dh den Absatz) weitergegeben wird.
  2. Wenn Sie mit der linken Maustaste auf die Schaltfläche klicken, sollte sie sich normal nach außen ausbreiten und auch den Listener für Absatzereignisse auslösen.

Lösung:

Hello Ho Button2

// Event Listener on the Button and it's logic document.getElementById("button12").addEventListener("mousedown", function(event) { alert("button clicked"); if (event.button == 2) // Right Click event.stopPropagation(); }); // Event Listener on the paragraph element with it's logic: document.getElementById("demo").addEventListener("mousedown", function(event) { alert("Paragraph clicked"); });

Entfernen eines Ereignis-Listeners aus einem Element

Um einen Ereignis-Listener aus einem Element zu entfernen, müssen Sie die Methode removeEventListener mit dem Ereignisnamen und dem Funktionsnamen aufrufen .

Note: when anonymous functions are passed, they don’t have memory mapping. So we need to define those functions outside the callback and then reference them here in the removeEventListener callback.

Document.getElementbyId("id_name").removeEventListener("click",fn_name)

If you have reached this point, you should have a decent understanding of how Event Listeners work in the JavaScript.

If, while working with your favorite library/Frameworks, you ever get stuck in the Events Handling part, then these basics should help you to resolve the issue.