Javascript addEventListener mit Argumenten

Wie Argumente an addEventListener nicht übergeben werden können

Zwischen der Zuweisung der Funktion und dem Auslösen des Events liegt eine Zeitspanne, in der ein übergebenes Objekt u.U. geändert oder gelöscht wurde. Darum gibt es nur das Event als Argument für die Funktion.

elem.addEventListener ("click", myFunction(event, myObject));

funktioniert nicht, ebensowenig wie

elem.onclick = function (event, myObject);

Es gibt aber Situationen, in denen die Übergabe einer lokalen Variablen wünschenswert wäre. Wenn eine Liste von Elementen in einer for-Schleife mit addEventListener für ein Event initialisiert wird, könnte z.B. der Index des Elements innerhalb seiner Gruppe benötigt werden.

addEventListener und this

Das auslösende Element steht bei addEventListener immer über Javascript this zur Verfügung – so wie hier, wo die aufgerufene Funktion mittels this entdeckt, welches option-Element das Script ausgelöst.

<select id="combo">
  <option value="">Select Combo</option>
  <option value="val1">Text1</option>
  <option value="val2">Text2</option>
  <option value="val3">Text3</option>
</select>

const combo = document.getElementById("combo");
combo.addEventListener('change', selectOption, false);

function selectOption() {
    const selectedOption = this.options[this.selectedIndex].value;
    document.querySelector("#selected").innerHTML = selectedOption;    
}

Event-Handler im addEventListener mit Argumenten

Parameter werden mit einer anonymen Funktion / Closure übergeben, in der wiederum die Funktion mit den Argumenten sitzt.

elem.addEventListener (
   'click', 
   function() { // anonyme Funktion
      showElem(param1, param2)
   },             ▲
   false          └─── Parameter in Callback-Funktion
);
            ┌─── Callback-Funktion
            ▼
function showElem(p1, p2) { 
    … 
}

Um den EventListener wieder zu entfernen, wird removeEventListener mit der inneren Funktion aufgerufen.

elem.removeEventListener("click", showElem);

Eine Funktion mit runden Klammern in addEventListener() würde sofort ausgeführt, aber die anonyme Funktion ruft die Callback-Funktion clickHandler auf. Ein wirklich einfaches Beispiel:

<div id="result"></div>
<button id="saywhat">Klicke mich</button>

const button = document.querySelector("#saywhat");
const x = 7;
const y = 13;

function clickHandler(a,b) {
	document.querySelector("#result").textContent = a * b;
}

button.addEventListener("click", function() {
	clickHandler(x,y);
});

Die Callback-Funktion clickHandler() wird nicht sofort ausgeführt, sondern erst beim Eintreten des Klick-Events (!). Alternativ kann clickHandler() auch in einer Arrow-Funktion aufgerufen werden.

// addEventListener mit anonymer Arrow-Funktion
button.addEventListener('click', () => clickHandler(a,b));	

Parameterübergabe mit bind()

bind() ist eine weitere Methode, um Argumente beim Aufruf der EventHandler-Funktion in addEventListener() zu übergeben, ohne dass sie sofort ausgeführt wird. bind() erzeugt eine neue Funktion, die beim Eintreten des Events aufgerufen wird. Jede Funktion hat Zugriff auf .bind().

const logText = function(text) {
   document.querySelector ("#hallo").innerHTML = text;
};

document.getElementById("hallo").addEventListener("click",
    logText.bind(null, "Hallo Welt")
);

bind() ist eine elegante Methode für die Übergabe von Parametern in einer Callback-Funktion, die von addEventListener() aufgerufen wird, denn sie übergibt nicht nur die Parameter, sondern auch this. Der erste Parameter von bind() ist der Wert für this in der gebundenen Funktion. this wird aber in diesem Beispiel nicht gebraucht, kann man also auf null setzen.

addEventListener in for-Loop

Wird der EventListener in einem for-Loop aufgerufen, kann der Index i nicht innerhalb der Funktion benutzt werden, wenn er traditionell als var i vereinbart wurde. Der Index zählt bei der Zuweisung der Event Listener für die Elemente hoch bis fruits.length und wird dann konserviert. Das auslösende Event tritt aber zu einem späteren Zeitpunkt ein.

Innerhalb der Funktion des EventListeners ist i fruits.length (3 in diesem Beispiel).

const fruits = document.querySelectorAll (".fruit");
for (var i=0; i<fruits.length; i++) {
	fruits[i].addEventListener ('click', function (eve) {
		// Der Index i kann hier nicht benutzt werden
		console.log ("this", this);
		console.log ("event", eve);
		message (this);
	});
}

function message (elem) {
	console.log ("elem.value", elem.value);
}

Der Ausweg ist der Umweg über das Event als Parameter im Funktionsaufruf. Das Element, auf dem das Event ausgelöst wurde, kann innerhalb der for-Schleife immer mit this angesprochen werden, das auslösende Event über den Parameter eve (für "event").

Let's Loop: for-Schleife mit let

Ganz anders, intuitiver und eleganter funktioniert der Event Handler, wenn der Index der for-Schleife mit let definiert / deklariert ist. let-Variablen in for-loops werden automatisch getrennt an jede Iteration gebunden.

const btn = document.querySelectorAll(".btn button");
for (let i=0; i<btn.length; i++) {
    btn[i].onclick = function() {
        document.querySelector(".res").innerHTML = i;
    }
}

Das hat Charme.