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

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

Answer 2

这是因为您将函数作为参数/参数传递给addEventListener() 方法。如果您添加对偶，该功能将立即执行，这不是您想要的。您是在告诉addEventListener() 在触发事件时执行哪个函数。

希望这会有所帮助。

Answer 3

这是核心 js 功能。你可以阅读这个here.

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

Answer 4

您正在附加一个事件侦听器，它将调用该函数 如果您在回调中添加 parentesis，您将收到错误，因为您执行了调用

Answer 5

没有括号，您实际上并没有调用该函数。一种 不带括号的函数名是对该函数的引用。

Answer 6

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