为什么 `addEventListener` 立即调用我的函数而不是在事件触发器上调用？

“addEventListener 在没有提示的情况下调用函数”解释

将事件监听器附加到元素时，我们希望函数仅在以下情况下执行事件发生。但在某些情况下，确保该函数不会过早调用可能会很棘手。

考虑以下 HTML 代码：

<span></span>

我们想要向第二个链接：

second.addEventListener('click', message_me('shazam'));

其中“message_me”是显示消息的外部函数。令人惊讶的是，这段代码甚至在我们点击第二个链接之前就立即触发了“message_me”函数。

问题

问题在于 JavaScript 处理函数引用的方式作为“addEventListener”的第二个参数。 JavaScript 需要对函数的引用，但在有问题的代码中，会立即调用函数“message_me('shazam')”，并传递其结果。

解决方案

有两种方法可以解决此问题：

• 创建一个匿名函数： 将 'message_me' 包装在匿名函数中以返回函数引用：

second.addEventListener('click', function() {
    message_me('shazam');
});

此解决方案确保仅在单击第二个链接时调用 'message_me'。

• 返回一个函数'message_me': 修改 'message_me' 以返回函数引用：

function message_me(m_text) {
    return function() {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

在这种情况下，'addEventListener' 接收对单击事件时将执行的函数的引用发生。

以上是为什么 `addEventListener` 立即调用我的函数而不是在事件触发器上调用？的详细内容。更多信息请关注PHP中文网其他相关文章！