为什么我的事件监听器立即触发函数？

事件监听器：无提示函数调用之谜

使用事件监听器时，可能会遇到一种令人费解的行为：添加带有外部函数引用的事件监听器似乎即使不单击该元素，也可以立即调用该函数。这可能会令人沮丧并导致意外行为。

请考虑以下 HTML 片段：

<span>

要添加点击事件，可以使用 addEventListener 方法：

first.addEventListener('click', function() {
  alert('sup!');
})

此代码按预期工作，在单击“第一个链接”时触发警报。但是，当使用外部函数作为第二个参数时：

function message_me(m_text) {
    alert(m_text)
}

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

立即调用 message_me 函数，甚至在单击“第二个链接”之前就会产生警报消息。

至要解决此问题，需要了解 addEventListener 的第二个参数需要一个函数引用。在有问题的代码中，直接调用该函数并将其结果传递给 addEventListener。相反，应该使用匿名函数作为第二个参数，或者应该修改外部函数以返回函数。

例如，我们可以在 addEventListener 中使用匿名函数：

function message_me(m_text) {
    alert(m_text)
} 

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

通过在匿名函数中提供函数引用，我们确保仅在单击“第二个链接”时调用 message_me 函数。

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