Event Handling und Event Delegation

[Gunnar Bittersmann]

@@Orlok

Wobei zu beachten ist, dass keine identischen Event Listener für ein Element existieren dürfen, sprich, wenn man für das gleiche Element mehr als einen Event Listener mit den selben Argumenten registriert, dann wird der bestehende Listeneintrag durch die nachfolgenden überschrieben. Aber das nur nebenbei.

Diese Nebenbemerkung hättest du dir verkneifen können. ;-) Da irrst du nämlich, glaub ich.

Eben da liegt der Unterschied. Hier wird überschrieben:

myElement.onclick = function () { console.log(1); };
myElement.onclick = function () { console.log(2); };

// Ausgabe:
// 2

Hier hingegen nicht:

myElement.addEventListener('click', function () { console.log(1); });
myElement.addEventListener('click', function () { console.log(2); });

// Ausgabe:
// 1
// 2

Gegenseitig überschreiben sich on… und addEventListener auch nicht:

myElement.addEventListener('click', function () { console.log(1); });
myElement.addEventListener('click', function () { console.log(2); });
myElement.onclick = function () { console.log(3); };

// Ausgabe:
// 1
// 2
// 3

Ebenso wie:

myElement.onclick = function () { console.log(1); };
myElement.addEventListener('click', function () { console.log(2); });
myElement.addEventListener('click', function () { console.log(3); });

// Ausgabe:
// 1
// 2
// 3

LLAP 🖖