javascript - 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

因为在这种情况下，addItem用作函数引用而不是函数的返回值。

如果你这样做:

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

然后addItem将立即执行，并且只要 addButton被点击，返回值为addItem (即 undefined )将被调用。这将导致错误，因为 undefined不是函数。

在这里，当我单击 addButton 时，你说的是，查找我传递的函数引用，并执行它。

你也可以用两种不同的方式来写:

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

以上两者仍将产生与原始代码相同的输出。