logo

TechCodeview

JavaScript addEventListener()

Der addEventListener() Die Methode wird verwendet, um einen Event-Handler an ein bestimmtes Element anzuhängen. Es überschreibt nicht die vorhandenen Ereignishandler. Ereignisse gelten als wesentlicher Bestandteil von JavaScript. Eine Webseite reagiert entsprechend dem eingetretenen Ereignis. Ereignisse können vom Benutzer oder von APIs generiert werden. Ein Ereignis-Listener ist eine JavaScript-Prozedur, die auf das Eintreten eines Ereignisses wartet.

Die Methode addEventListener() ist eine integrierte Funktion von JavaScript . Wir können einem bestimmten Element mehrere Event-Handler hinzufügen, ohne die vorhandenen Event-Handler zu überschreiben.

Syntax

 element.addEventListener(event, function, useCapture);

Obwohl es drei Parameter hat, sind die Parameter Ereignis Und Funktion sind weit verbreitet. Der dritte Parameter kann optional definiert werden. Die Werte dieser Funktion sind wie folgt definiert.

Parameterwerte

Ereignis: Es handelt sich um einen erforderlichen Parameter. Es kann als Zeichenfolge definiert werden, die den Namen des Ereignisses angibt.

Hinweis: Verwenden Sie für den Parameterwert kein Präfix wie „on“. Verwenden Sie beispielsweise „click“ anstelle von „onclick“.

Funktion: Es ist auch ein erforderlicher Parameter. es ist ein JavaScript-Funktion die auf das auftretende Ereignis reagiert.

Java-Sammlungsframework

useCapture: Es handelt sich um einen optionalen Parameter. Es handelt sich um einen booleschen Wert, der angibt, ob das Ereignis in der Bubbling- oder Capture-Phase ausgeführt wird. Seine möglichen Werte sind WAHR Und FALSCH . Wenn es auf „true“ gesetzt ist, wird der Ereignishandler in der Erfassungsphase ausgeführt. Wenn es auf „false“ gesetzt ist, wird der Handler in der Bubbling-Phase ausgeführt. Der Standardwert ist FALSCH .

Sehen wir uns einige Illustrationen zur Verwendung der Methode addEventListener() an.

Beispiel

Es ist ein einfaches Beispiel für die Verwendung der Methode addEventListener(). Wir müssen auf das Gegebene klicken HTML-Schaltfläche um den Effekt zu sehen.

Beispiel für die Methode addEventListener().

Klicken Sie auf die folgende Schaltfläche, um den Effekt zu sehen.

Klicken Sie auf mich document.getElementById('btn').addEventListener('click', fun); function fun() { document.getElementById('para').innerHTML = 'Hello World' + '
' + 'Willkommen bei javaTpoint.com'; }Testen Sie es jetzt

Ausgabe

JavaScript addEventListener()

Nachdem Sie auf die angegebene HTML-Schaltfläche geklickt haben, lautet die Ausgabe:

JavaScript addEventListener()

Im nächsten Beispiel werden wir nun sehen, wie man viele Ereignisse zum gleichen Element hinzufügt, ohne die vorhandenen Ereignisse zu überschreiben.

wie man einen String in ein Zeichen umwandelt

Beispiel

In diesem Beispiel fügen wir mehrere Ereignisse zum selben Element hinzu.

Dies ist ein Beispiel für das Hinzufügen mehrerer Ereignisse zu demselben Element.

Zeichenfolge ersetzt alle Java

Klicken Sie auf die folgende Schaltfläche, um den Effekt zu sehen.

Click me function fun() { Alert('Willkommen bei javaTpoint.com'); } function fun1() { document.getElementById('para').innerHTML = 'Dies ist die zweite Funktion'; } function fun2() { document.getElementById('para1').innerHTML = 'Dies ist die dritte Funktion'; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('click', fun); mybtn.addEventListener('click', fun1); mybtn.addEventListener('click', fun2);Testen Sie es jetzt

Ausgabe

JavaScript addEventListener()

Wenn wir nun auf die Schaltfläche klicken, wird eine Warnung angezeigt. Nachdem Sie auf die angegebene HTML-Schaltfläche geklickt haben, lautet die Ausgabe:

JavaScript addEventListener()

Wenn wir die Warnung verlassen, lautet die Ausgabe:

JavaScript addEventListener()

Beispiel

In diesem Beispiel fügen wir dem gleichen Element mehrere Ereignisse unterschiedlichen Typs hinzu.

Dies ist ein Beispiel für das Hinzufügen mehrerer Ereignisse unterschiedlichen Typs zu demselben Element.

Klicken Sie auf die folgende Schaltfläche, um den Effekt zu sehen.

Click me function fun() { btn.style.width = '50px'; btn.style.height = '50px'; btn.style.background = 'gelb'; btn.style.color = 'blau'; } function fun1() { document.getElementById('para').innerHTML = 'Dies ist die zweite Funktion'; } function fun2() { btn.style.width = ''; btn.style.height = ''; btn.style.background = ''; btn.style.color = ''; } var mybtn = document.getElementById('btn'); mybtn.addEventListener('mouseover', fun); mybtn.addEventListener('click', fun1); mybtn.addEventListener('mouseout', fun2);Testen Sie es jetzt

Ausgabe

sonniges Deol-Zeitalter
JavaScript addEventListener()

Wenn wir den Cursor über die Schaltfläche bewegen, lautet die Ausgabe:

JavaScript addEventListener()

Nachdem Sie auf die Schaltfläche geklickt und den Cursor verlassen haben, lautet die Ausgabe:

JavaScript addEventListener()

Event-Bubbling oder Event-Capturing

Jetzt verstehen wir die Verwendung des dritten Parameters von JavaScripts addEventListener(), d. h. useCapture.

Im HTML-DOM, Sprudelnd Und Erfassen sind die beiden Arten der Ereignisausbreitung. Wir können diese Vorgehensweise anhand eines Beispiels verstehen.

Angenommen, wir haben ein div-Element und ein Absatzelement darin und wenden das an 'klicken' Ereignis an beide über die addEventListener() Methode. Die Frage ist nun, ob beim Klicken auf das Absatzelement das Klickereignis des Elements zuerst behandelt wird.

Also rein Sprudelnd, Zuerst wird das Ereignis des Absatzelements und dann das Ereignis des div-Elements behandelt. Dies bedeutet, dass beim Blasen zuerst das Ereignis des inneren Elements und dann das Ereignis des äußersten Elements behandelt wird.

In Erfassen Zuerst wird das Ereignis des div-Elements und dann das Ereignis des Absatzelements behandelt. Dies bedeutet, dass beim Erfassen zuerst das Ereignis des äußeren Elements und dann das Ereignis des innersten Elements behandelt wird.

for-Schleife in Bash 
 addEventListener(event, function, useCapture);

Wir können die Ausbreitung mithilfe von spezifizieren useCapture Parameter. Wenn es auf „false“ (das ist der Standardwert) gesetzt ist, verwendet das Ereignis die sprudelnde Ausbreitung, und wenn es auf „true“ gesetzt ist, gibt es die einfangende Ausbreitung.

Wir können das verstehen sprudelnd Und Erfassen anhand einer Illustration.

Beispiel

In diesem Beispiel gibt es zwei div-Elemente. Wir können den Blaseneffekt beim ersten Div-Element und den Einfangeffekt beim zweiten Div-Element sehen.

Wenn wir auf das span-Element des ersten div-Elements doppelklicken, wird das Ereignis des span-Elements zuerst behandelt als das div-Element. Es wird genannt sprudelnd .

Wenn wir jedoch auf das span-Element des zweiten div-Elements doppelklicken, wird das Ereignis des div-Elements zuerst behandelt und nicht das span-Element. Es wird genannt Erfassen .

 div{ background-color: lightblue; border: 2px solid red; font-size: 25px; text-align: center; } span{ border: 2px solid blue; } This is a div element. <br> <br> <span id="s2"> This is a span element. </span> document.getElementById(&apos;d1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, false); document.getElementById(&apos;s1&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, false); document.getElementById(&apos;d2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on div element&apos;)}, true); document.getElementById(&apos;s2&apos;).addEventListener(&apos;dblclick&apos;, function() {alert(&apos;You have double clicked on span element&apos;)}, true);
Testen Sie es jetzt

Ausgabe

JavaScript addEventListener()

Wir müssen auf die spezifischen Elemente doppelklicken, um den Effekt zu sehen.