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();
});

以上两种方法仍会产生与原始代码相同的输出。