JS Eventlistener mit Callback Parameter?
Hi, ich mache derzeit das Odins Project und hänge rein vom Verständnis an einem Code-Beispiel fest.
btn.addEventListener('click', function (e) {
console.log(e);
});
btn.addEventListener --> schauen ob ein Event eintritt und dann eine function ausführen
"click"--> wenn der Button angeklickt wird
function (e)--> hier ist das Problem. ich versehe, dass es eine anonyme callback Funktion ist, aber nicht wieso sich der Parameter e auf den Button bezieht und ich damit den Button ansteuern kann. Versuche es seit 2 Tagen zu verstehen und bitte um eine einfache Erklärung. Im Internet steht, dass das ein Objekt vom EventListener ist aber darunter kann ich mir auch nicht wirklich etwas vorstellen.
2 Antworten
Das Prinzip hinter Event Listenern ist, dass du für ein Ereignis, welches auf einem bestimmten Element ausgelöst wird, eine Funktion (Event Handler) registrierst (das ist die Funktion, die du als Argument an addEventListener übergibst). Sobald das Ereignis ausgelöst wird, werden alle dafür registrierten Funktionen durchlaufen und ausgeführt.
Bei Aufruf jedes einzelnen Handlers wird ihm auch ein Event-Objekt überreicht, welches verschiedene Informationen zu dem ausgelösten Ereignis beinhaltet. Bei einem Klickereignis würde es bspw. die Koordinaten zum Klick enthalten, bei einer gedrückten Taste hingegen den Keycode für die Taste.
Im folgenden Beispiel wird es vielleicht auch noch einmal verständlicher. In diesem Fall wird ein eigenes, neues Event namens didSomething erstellt und via dispatchEvent ausgelöst.
const myEvent = new CustomEvent("didSomething", {
detail: "Something is happen."
});
document.addEventListener("didSomething", evt => console.log(evt.detail));
document.dispatchEvent(myEvent); // trigger event
Hallo,
die Variable e ist in deinem Fall das Event. Genauer gesagt das ClickEvent bzw. MouseEvent. Du bekommst es automatisch übergeben, sobald der Button dann geklickt wurde.
In einigen Fällen willst du eventuell genauer wissen, wohin geklickt wurde. Das kannst du dir theoretisch dann alles aus diesem Objekt auslesen.
Dokumentation dazu findest du beispielsweise hier:
https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event