CSS, HTML und Javascript mit {stil}

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 ü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. 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 wäre i also immer fruits.length (3 in diesem Beispiel).

var fruits = document.querySelectorAll (".fruit");
for (let 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);
}

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