addEventListener中如何不使用括号调用函数？

Question

我不明白为什么在addEventListener('click',addItem)中，addItem()和removeItem()没有括号就可以被调用。

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

- Mercury1337

---

那是对函数的引用。如果你执行 var anotherAddItem = addItem;，那么你可以以相同的方式执行 anotherAddItem()。 - Reinstate Monica Cellio

可能是JavaScript addEventListener函数语法的重复问题。 - Joshua T

这个回答解决了你的问题吗？addEventListener调用函数，即使我没有请求它 - ggorlen

Answer 1

因为在这个上下文中，addItem 被用作 函数引用 而不是函数的返回值。

如果您这样做：

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

然后会立即执行addItem，无论何时点击addButton都会调用addItem的返回值（即undefined），这将导致错误，因为undefined不是函数。

这里的意思是当我点击addButton时，查找我传递的函数引用并执行它。

你也可以用两种不同的方式来写出这个内容：

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

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

- Jack Bashford

Answer 2

这是因为你将函数作为参数传递给了addEventListener()方法。如果加上括号，函数会立即执行，这不是你想要的。你告诉addEventListener()在事件被触发时执行哪个函数。

希望这能帮到你。

- Ryan

Answer 3

没有括号，你实际上并没有调用函数。没有括号的函数名是对函数的引用。

- Shovan

Answer 4

这是核心的js功能。您可以在这里阅读相关内容。

函数是函数对象。在JavaScript中，任何不是原始类型（undefined、null、boolean、number或string）的东西都是对象。JavaScript中的对象非常灵活。因此，我们甚至可以将一个函数作为参数传递到另一个函数中。

- dganenco

Answer 5

您正在附加事件侦听器，它将调用函数。如果您在回调函数内部添加括号，则会收到错误，因为您执行了调用。

- gigiLaTrottola

Answer 6

第二个参数是addEventlistener方法的函数。您可以在全局中定义该函数，而不需要在第二个参数addEventlistener中添加括号。

- Muhammad Ali Malekzadeh