Das DOM-Lemma »`EventTarget#removeEventListener`«

Die Funktion »removeEventListener« kann eine zuvor mit »addEventListener« hergestellte Verdrahtung wieder entfernen. Dazu müssen die Werte der Argumente im Aufruf von »removeEventListener« den Werten der Argumente in dem Aufruf von »addEventListener«, dessen Wirkung rückgängig gemacht werden soll, gleichen.

DOM4 (»www.w3.org/TR/2015/REC-dom-20151119/«, »www.w3.org/TR/dom/#defining-event-interfaces«, »dom.spec.whatwg.org/«) (vereinfacht und übersetzt)

Sprache EventTarget
removeEventListener( string Ereignisart, function Funktion )

Entfernt die angegebene Funktion »Funktion« zur Behandlung von Ereignissen der angegebenen Ereignisart »Ereignisart« aus dem Ziel.

Inklusionsdiagramm

Document, Element, DocumentType, DocumentFragment, CharacterData > Node > EventTarget > addEventListener, removeEventListener

Durch die Auswertung von »document.removeEventListener( "DOMContentLoaded", wennDOMinhaltGeladen )« wird die Funktion »wennDOMinhaltGeladen« als Behandlungsfunktion für das Ereignis »DOMContentLoaded« des Dokuments »document« wieder entfernt, wenn sie vorher durch einen Aufruf wie »document.removeEventListener( "DOMContentLoaded", wennDOMinhaltGeladen )« zu dem Dokument hinzugefügt wurde.

Zwei Ausdrücke, die beide eine Funktion als Wert haben, gelten als gleichwertig, wenn sie beide den Wert der gleichen Auswertung eines function-Ausdruckes enthalten.

Auswertung

const f = () => {}

undefined

Auswertung

g = f

function f()

Auswertung

f === g

true

Die beiden Funktionen in dem folgenden Vergleich gelten nicht als gleich, weil sie Werte zweier verschiedener Auswertungen sind.

Auswertung

( ()=>{} )===( ()=>{} )

false

»addEventListener( e, f )« wird von einem nachfolgenden »removeEventListener( e1, f1 )« aufgehoben, wenn »e === e1« und »f === f1« gilt.

»addEventListener( "event", ()=>{} )« kann also nicht von »removeEventListener( "event", ()=>{} )« aufgehoben werden, da »( ()=>{} )===( ()=>{} )« nicht gilt.

Beispiel

In dem folgenden Beispiel wird die mit »addEventListener« hergestellte Verdrahtung mit »removeEventListener« wieder aufgehoben, sobald sie ihre Aufgabe erfüllt hat.

main.html

<!DOCTYPE HTML><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Hallo</title><style type="text/css">
</style></head><body>
<h1>Ladeanzeige</h1>
<p><span id="id0">beim Laden</span></p>
<pre><code><script>/*<![CDATA[*/
onDOMContentLoaded = () =>
{ window.document.removeEventListener( "DOMContentLoaded", onDOMContentLoaded );
  window.document.getElementById( "id0" ).innerHTML = "geladen"; };
window.document.addEventListener( "DOMContentLoaded", onDOMContentLoaded );
/*]]>*/</script></code></pre></body></html>

Motivation

Sobald ein Ereignis nicht mehr verarbeitet werden soll, ist es gut, die entsprechende Behandlungsfunktion wieder zu entfernen, da dies den Verarbeitungsaufwand und den Speicherplatzbedarf vermindert.

Das DOM-Lemma »EventTarget#removeEventListener«

Beispiel

Motivation

Das DOM-Lemma »`EventTarget#removeEventListener`«