addEventListener - Blockzuweisung

Wenn beispielweise eine Navigation "UL" erstellt wird, ist man gezwungen, das Event "click" über eine Schleife oder Ähnlichem zuzuweisen.
In unserem Beispiel übernimmt dies eine For-Schleife. Die Anzahl der Durchläufe wird ermittelt, indem wir die Liste durchzählen. Hierfür gibt es mehrere Möglichkeiten, ich benutze hierfür querySelectorAll( 'ul.beispiel-ul li' ).
Der querySelector gibt hier ein Array mit allen LI-Elemente zurück, was sehr praktisch ist. Denn so haben wir die Anzahl der LI-Tags als auch alle weiteren Informationen jedes einzelnen LI-TAG's.

Doch sehen wir uns das Beispiel genauer an.

Kopiert Euch gerne den Code und probiert es aus: Code

Beispiel

Klick mich
Klick mich
Klick mich
Klick mich

Code


HTML:

<ul class="beispiel-ul">
	<li id="bsp-li-0">Klick mich</li>
	<li id="bsp-li-1">Klick mich</li>
	<li id="bsp-li-2">Klick mich</li>
	<li id="bsp-li-3">Klick mich</li>
</ul>



CSS:

ul.beispiel-ul li.selected {
    background-color: #FFF;
    color: #000;
}



JavaScript:

// Nur wenn die Liste vorhanden ist
if( document.querySelectorAll( 'ul.beispiel-ul' ) ){
	
	// LI's ermitteln => Rückgabe Array
	const liElem = document.querySelectorAll( 'ul.beispiel-ul li' );
	// Anzahl der LI's ermitteln => length
	const liElemLength = liElem.length;
	
	for(let i = 0; i < liElemLength; i++){		
		// Event zuweisen
		liElem[i].addEventListener('click', () => {
			// Funktion zuweisen und die jeweilige id übergeben
			machWas(liElem[i].id);
		});	
	}
	
	function machWas(id){
		// Klasse 'selected' zuweisen
		document.querySelector('#'+id).classList.add('selected');
	}
}