Wie wird die Funktion ohne Klammern in addEventListener verwendet?

Ich kann nicht verstehen, wie das geht addItem() und removeItem() wird ohne Klammern aufgerufen addEventListener('click', addItem).

var addButton = document.getElementById('add');
addButton.addEventListener('click', addItem);

var removeButton = document.getElementById('remove');
removeButton.addEventListener('click', removeItem);

function addItem(){
    console.log('Add Button clicked');
}

function removeItem(){
    console.log('Remove Button clicked');
}

Denn in diesem Zusammenhang addItem wird als verwendet Funktionsreferenz und nicht der Rückgabewert der Funktion.

Wenn Sie dies getan haben:

addButton.addEventListener('click', addItem());

Dann addItem würde sofort hingerichtet werden, und wann immer addButton geklickt wurde, der Rückgabewert von addItem (welches ist undefined) aufgerufen werden. Dies würde zu einem Fehler führen, weil undefined ist keine Funktion.

Hier, sagst du wenn ich klicke addButtonsuchen Sie die von mir übergebene Funktionsreferenz und führen Sie sie aus.

Sie können dies auch auf zwei verschiedene Arten schreiben:

addButton.addEventListener('click', "addItem()");
addButton.addEventListener('click', function() {
    addItem();
});

Beides führt immer noch zu derselben Ausgabe wie Ihr ursprünglicher Code.

Dies liegt daran, dass Sie die Funktion als Argument/Parameter an die übergeben addEventListener() Methode. Wenn Sie die Parathese hinzufügen, würde die Funktion sofort ausgeführt werden, und das ist nicht das, was Sie wollen. Du erzählst das addEventListener() welche Funktion ausgeführt werden soll wenn das Ereignis ausgelöst wird.

Hoffe das hilft.

Dies ist die Core-js-Funktionalität. Sie können darüber lesen Hier.

Funktionen sind Funktionsobjekte. In JavaScript ist alles, was kein primitiver Typ ist ( undefined , null , boolean , number oder string ), ein Objekt. Objekte in JavaScript sind extrem vielseitig. Aus diesem Grund können wir sogar eine Funktion als Parameter an eine andere Funktion übergeben

Sie hängen einen Ereignis-Listener an und dieser ruft die Funktion auf. Wenn Sie die Klammer innerhalb des Rückrufs hinzufügen, erhalten Sie einen Fehler, weil Sie den Aufruf ausführen

Ohne Klammern rufen Sie die Funktion nicht wirklich auf. Ein Funktionsname ohne die Klammern ist ein Verweis auf die Funktion.

Das zweite Argument ist die addEventlistener Methodenfunktion. Sie können die Funktion global definieren, ohne Klammern im zweiten Argument addEventlistener hinzuzufügen.