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>

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

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

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
);

function showElem(p1, p2) { 
    … 
}

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

elem.removeEventListener("click", showElem);

Oder kurz, knapp und prägnant als Arrow Function

elem.addEventListener('click', (event) => ((arg) => {
	console.log(event, arg);
})('Mein Argument'));

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. Aber ein Blick ins schwarze Ofenrohr des Webdesigns: IE11 läßt sich zwar auf let für die Definition von Variablen ein, aber genau hier hat IE11 eine seiner Schwachstellen. In IE11 gibts immer »4«.

addEventListener callback und bind

Die Argumente in einer callback-Funktion übergeben.

function callback(a, b) {
   return function() {
      console.log("Summe " + (a + b));
   }
}

let x = 1;
let y = 2;
document.getElementById("saywhat").addEventListener("click", callback(x, y));

Eine weitere Methode ist bind.

let logText = function(text) {
   console.log (text);
};

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