javascript - 为什么我的 'click' addEventListener 在页面加载时被调用

Question

我有一个 id #login 的按钮和一个包含以下行的 javascript 文件:

document.getElementById('login').addEventListener('click', 'LoginPressed()')

作为测试，我做了这个功能:

function LoginPressed(){
  console.log('was login pressed already??')
}

每次页面加载时我的函数都会被调用。我该如何阻止这种情况发生？

注意，我也尝试过不使用引号的回调，也不将其作为函数:

document.getElementById('login').addEventListener('click', LoginPressed())
document.getElementById('login').addEventListener('click', LoginPressed)
document.getElementById('login').addEventListener('click', 'LoginPressed')

Answer 1

因为您调用它，而不是引用它。

这个:

 document.getElementById('login').addEventListener('click', 'LoginPressed()');

应该是这样的:

 document.getElementById('login').addEventListener('click', LoginPressed);

LoginPressed 后面不应该有括号，因为您只想引用该函数，以便知道这是稍后要调用的函数。有了括号，您就可以立即调用它。

LoginPressed 周围也不应该有引号，因为这是函数的实际名称。有了引号，JavaScript 运行时将无法正确识别该函数。

这是您的代码，已正确编写并正常工作(请注意，在单击按钮之前控制台消息不会出现):

document.getElementById('login').addEventListener('click', LoginPressed)

function LoginPressed(){
  console.log('was login pressed already??')
}

<button id="login">Click Me</button>