JavaScript, wofür steht in function(e) das e?
Hallo, ich lerne aktuell JS und habefolgendes Beispiel (siehe unten). Ich frage mich, wieso Lehrbücher in anonymen Funktionen solche Buchstaben als Parameter einbauen. Das e steht hier glaube ich für "Event", aber es ändert ja nichts an der Funktionsweise, wenn ich die Klammern leer stehen lasse, korrekt? Ich würde gerne verstehen, welche Vorteile sich für den Programmierer hier bieten. Am Anfang und auch jetzt fand ich es verwirrend, weil der Buchstabe ja nur symbolische Funktion zu haben scheint. Deswegen frage ich mich auch oft "Sollte ich das genauso handhaben oder eher weglassen". Dass es um ein Event geht, sieht man ja schon daran, dass Event-Listener und das Event change eingesetzt wird.
const checkbox = document.getElementById("remember");
checkbox.addEventListener(
"change",
function(e) {
console.log(checkbox.value);
console.log(checkbox.checked);
}
);
5 Antworten
Hallo StiftausBlei,
JavaScript schon eine weile nicht mehr gemacht, sollte aber an sich eine Variable sein die dort als Parameter übergeben wird.
In dem Beispiel wird die Variable allerdings nicht initialisiert, befüllt oder ausgelesen. Komisches Beispiel
Ben
Die Variable wird vom Aufrufer befüllt. Dieser Prozess findet allerdings intern statt. Sobald das change-Event geworfen wird, wird es als Objekt an den verknüpften Handler (die anonyme Funktion oben) übergeben.
Wenn du nicht explizit einen Namen für das EventObjekt (welches vom Sender des Ereignisses übergeben wird) angibst, hat die Objektvariable einfach den Namen event. ansonsten ist das EventObjekt unter dem übergebenen Variablennamen Anprechbar.
Ein solches eObject liefert (abhängig von der Quelle) diverse auswertbare Informationen:
<!DOCTYPE html>
<html>
<body>
<p> check it:</p>
<input type="checkbox" id="myCheck" name="myCheck" value="Ich">
<label for="myCheck"> ich</label><br>
<p id="demo">
<script>
const element = document.getElementById("myCheck");
element.addEventListener("change", function() {
for (var x in event){
console.log(x +' = ' + event[x]);
document.getElementById("demo").innerHTML += 'event.' + x +' = ' + event[x] +'<br>'; // mal ohne console
}
})
</script>
</body>
</html>
ein Button ist da wesentlich interessanter (hier mal mit expliziter Eventvariabe) :
<!DOCTYPE html>
<html>
<body>
<button id="myBtn">Zeig was, was mein eventObjekt alles übergibt</button>
<p id="demo">
<script>
const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction);
function myFunction(e) {
for (var x in e){
console.log(x +' = ' + e[x]);
document.getElementById("demo").innerHTML += 'e.' + x +' = ' + e[x] +'<br>';
}
}
</script>
</body>
</html>
e ist schlussendlich ein Funktionsparameter. Wenn dein Event aufgerufen wird, kannst du über e auf gewisse Details des Events zugreifen. Bei einem Tastenanschlag beispielsweise welche Taste gedrückt wurde, usw.
Wenn du diese Details nicht brauchst, kannst du das auch weglassen, korrekt.
E steht für das Event
das ist die variable die vom event übergeben wird .
https://www.javascripttutorial.net/dom/events/add-an-event-handler/
z.b.
const btn = document.querySelector('.btn');
btn.addEventListener('click', function(event){
console.log('Button Clicked');
});