Javascript addEventListener mit Argumenten

Javascript addEventListener mit Argumenten

Wenn die Funktion in addEventListener Argumente braucht, wird eine anonyme Funktion innerhalb des Funktionsaufrufs des addEventListener benötigt.

addEventListener weist einem Element eine Funktion zu, die beim Eintritt des Events ausgeführt wird. Nur ein einziger Paramater kann dieser Funktion übergeben werden: das Event.

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() {
    var 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);

addEventListener in for-Loop

Ananas Erdbeere Melone


	

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

var 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.

let 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.

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

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