Как функция используется без скобок в addEventListener?

Question

Я не могу понять, как эти addItem() и removeItem() называются без скобок в 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');
}

Answer 1

Это потому, что вы передаете функцию в качестве аргумента / параметра методу addEventListener().Если вы добавите паратез, функция будет выполняться сразу, а это не то, что вам нужно.Вы говорите addEventListener(), какую функцию выполнять при возникновении события .

Надеюсь, это поможет.

Answer 2

Вы подключаете прослушиватель событий, и он вызовет функцию Если вы добавите парентез в обратный вызов, вы получите ошибку, потому что вы выполняете вызов

Answer 3

Поскольку в этом контексте addItem используется как ссылка на функцию , а не как возвращаемое значение функции.

Если вы сделали это:

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

Тогда addItem будет выполнено сразу же, и всякий раз, когда нажимается addButton, вызывается возвращаемое значение addItem (то есть undefined).Это может привести к ошибке, поскольку undefined не является функцией.

Здесь вы говорите , когда я нажимаю addButton, ищем ссылку на функцию, которую я передал, и выполняю ее.

Вы также можете написать это двумя разными способами:

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

Оба приведенных выше результата все равно приведут к тому же выводу, что и ваш исходный код.

Answer 4

Это базовая функциональность js. Вы можете прочитать об этом здесь.

Функции являются функциональными объектами. В JavaScript все, что не является тип примитива (неопределенный, ноль, логическое значение, число или строка) объект. Объекты в JavaScript чрезвычайно универсальны. Потому что это, мы даже можем передать функцию в качестве параметра в другую функцию

Answer 5

Без скобок вы фактически не вызываете функцию.Имя функции без скобок является ссылкой на функцию.