JavaScript verwendet EventListener, um HTML-DOM_Basic-Kenntnisse zu verarbeiten-js-Tutorial-php.cn

addEventListener()-Methode
Beispiel
Das Listening-Ereignis wird ausgelöst, wenn der Benutzer auf die Schaltfläche
klickt

document.getElementById("myBtn").addEventListener("click", displayDate);

Nach dem Login kopieren

Die Methode addEventListener() wird verwendet, um dem angegebenen Element einen Event-Handler hinzuzufügen.
Der von der Methode addEventListener() hinzugefügte Ereignishandler überschreibt nicht den vorhandenen Ereignishandler.
Sie können einem Element mehrere Ereignishandler hinzufügen.
Sie können demselben Element mehrere Ereignishandler desselben Typs hinzufügen, beispielsweise zwei „Klick“-Ereignisse.
Sie können Ereignis-Listener zu jedem DOM-Objekt hinzufügen, nicht nur zu HTML-Elementen. Zum Beispiel: Fensterobjekt.
Die Methode addEventListener() erleichtert die Steuerung von Ereignissen (Bubbling und Capture).
Wenn Sie die Methode addEventListener() verwenden, wird das JavaScript vom HTML-Markup getrennt, wodurch es besser lesbar wird, und Sie können Ereignis-Listener hinzufügen, ohne das HTML-Markup zu steuern.
Sie können die Methode „removeEventListener()“ verwenden, um Ereignis-Listener zu entfernen.
Grammatik

element.addEventListener(event, function, useCapture);

Nach dem Login kopieren

Der erste Parameter ist die Art des Ereignisses (z. B. „Klick“ oder „Mousedown“).
Der zweite Parameter ist die Funktion, die aufgerufen wird, nachdem das Ereignis ausgelöst wurde.
Der dritte Parameter ist ein boolescher Wert, der beschreibt, ob das Ereignis sprudelt oder einfängt. Dieser Parameter ist optional.
Hinweis: Verwenden Sie nicht das Präfix „on“. Verwenden Sie beispielsweise „click“ anstelle von „onclick“.

Ereignishandler zum ursprünglichen Element hinzufügen
Beispiel
„Hallo Welt!“ erscheint, wenn der Benutzer auf das Element klickt:

element.addEventListener("click", function(){ alert("Hello World!"); });

Nach dem Login kopieren

Sie können Funktionsnamen verwenden, um auf externe Funktionen zu verweisen:
Beispiel
„Hallo Welt!“ erscheint, wenn der Benutzer auf das Element klickt:

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

Nach dem Login kopieren

Mehrere Event-Handler zum selben Element hinzufügen
Die Methode addEventListener() ermöglicht das Hinzufügen mehrerer Ereignisse zum selben Element, ohne vorhandene Ereignisse zu überschreiben:
Beispiel

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Nach dem Login kopieren

Sie können demselben Element verschiedene Arten von Ereignissen hinzufügen:
Beispiel

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Nach dem Login kopieren

Fügen Sie einen Event-Handler zum Window-Objekt hinzu
Mit der Methode addEventListener() können Sie Ereignis-Listener zu HTML-DOM-Objekten wie HTML-Elementen, HTML-Dokumenten und Fensterobjekten hinzufügen. Oder andere Ausgabenereignisobjekte wie: xmlHttpRequest-Objekt.
Beispiel
Fügen Sie einen Ereignis-Listener hinzu, wenn der Benutzer die Fenstergröße zurücksetzt:

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

Nach dem Login kopieren

Parameter übergeben
Verwenden Sie beim Übergeben von Parameterwerten „anonyme Funktionen“, um Funktionen mit Parametern aufzurufen:
Beispiel

element.addEventListener("click", function(){ myFunction(p1, p2); });

Nach dem Login kopieren

Event-Bubbling oder Event-Capturing?
Es gibt zwei Möglichkeiten der Ereignisbereitstellung: Sprudeln und Einfangen.
Die Ereignisübermittlung definiert die Reihenfolge, in der Elementereignisse ausgelöst werden. Wenn Sie ein

-Element in ein

-Element einfügen und der Benutzer auf das

-Element klickt, wird das „Klick“-Ereignis zuerst ausgelöst?
Beim Bubbling wird zuerst das Ereignis des inneren Elements und dann das äußere Element ausgelöst, d. h. das Klickereignis des

-Elements wird zuerst ausgelöst und dann das Klickereignis des

-Elements wird ausgelöst.
Bei der Erfassung wird zuerst das Ereignis des äußeren Elements und dann das Ereignis des inneren Elements ausgelöst, d. h. zuerst wird das Klickereignis des

-Elements ausgelöst und dann das Klickereignis von Das

-Element wird ausgelöst.
Die Methode addEventListener() kann den Parameter „useCapture“ angeben, um den Übermittlungstyp festzulegen:

addEventListener(event, function, useCapture);

Nach dem Login kopieren

Der Standardwert ist „false“, was bedeutet, dass eine Blasenzustellung erfolgt. Wenn der Wert „true“ ist, wird das Ereignis mithilfe der Erfassung übermittelt.
Beispiel
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Probieren Sie es aus »

removeEventListener()-Methode
Die Methode „removeEventListener()“ entfernt den von der Methode „addEventListener()“ hinzugefügten Ereignishandler:
Beispiel

element.removeEventListener("mousemove", myFunction);

Nach dem Login kopieren

Browser-Unterstützung
Die Zahlen in der Tabelle stellen die Versionsnummer des ersten Browsers dar, der diese Methode unterstützt.
JavaScript verwendet EventListener, um HTML-DOM_Basic-Kenntnisse zu verarbeiten
Hinweis: IE 8 und frühere IE-Versionen, Opera 7.0 und frühere Versionen unterstützen die Methoden addEventListener() und removeEventListener() nicht. Für solche Browserversionen kann der Event-Handler jedoch mit der detachEvent()-Methode entfernt werden:

element.attachEvent(event, function);
element.detachEvent(event, function);

Nach dem Login kopieren

Beispiel
Browserübergreifende Problemumgehung:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);

Nach dem Login kopieren

Verwandte Etiketten：

dom javascript

Quelle：php.cn

Vorheriger Artikel：js lädt den Beispielcode für den Verifizierungscode erst, nachdem Sie auf den Text box_javascript skills geklickt haben Nächster Artikel：Sortiermethode für JavaScript-Objekte array_javascript skills

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors