Inline-Scripting Fluch oder Segen / addEventListener()

Kurz gesagt: Ja Ihr solltet auf Inline-Scripting verzichten wenn möglich.
Auf soetwas wie: <a href="url" onclick="myFunction()"> oder <a href="url" style="border-color:blue;"> sollte möglichst verzichtet werden. Denn bei Validierungen wird dies als eine Gefährdung eingestuft.
Gut - bei CSS sollte es ja kein Problem darstellen, bei JavaScript sieht das schon anders aus.
Lösung: die Methode addEventListener(event, function, Capture).
In unserm Beispiel haben wir ein DIV mit der Klasse "clickMe". Ihm möchte ich ein Klick-Event zuweisen.
Wir lassen ein alert() öffnen.

Kopiert Euch gerne den Code und probiert es aus: Code

HTML:

<div class="clickMe">
	Klick mich
</div>
<br>
<a href="#do" id="get_ev">Event zuweisen</a>.




CSS:




JavaScript:

// Element festlegen
let b1_divElem = document.querySelector('.clickMe');

// EventListener zuweisen
b1_divElem.addEventListener('click',myFunction);

// Die Funktion welche ausgeführt werden muss
function myFunction(){
	alert('Hallo Welt');
}