按钮上的onClick事件即使未单击按钮也会激发

Question

我正在尝试向按钮添加一个事件侦听器，这是我使用的代码：

window.onload = function(){
document.getElementById('loginButton').onClick = logInToPod();
}

问题是，由于某种原因，logInToPod()函数在页面加载后立即被调用，而无需单击按钮，而我编写的代码应该只添加事件侦听器，在单击按钮之前不调用该函数，对吧？

我正在使用webpack，我不知道这是否重要或导致了这种情况。

Answer 1

我看到两个主要问题：

1. onClick应为onclick
2. logInToPod()应该是logInToPod

所以我建议修改你的代码，比如：

window.onload = function(){
document.getElementById('loginButton').onclick = logInToPod;
}

这里是一个JSFiddle示例。

Answer 2

这个问题的出现是因为您直接用括号调用logInToPod函数，这意味着它将在执行window.load的同时进行求值。你应该通过指针来调用它，正如我在下面列出的那样

window.onload = function(){
document.getElementById('loginButton').onclick = logInToPod;
}
function logInToPod()
{
alert("You have clicked me!");
}

<button id="loginButton">Click me to alert</button>

这里logIntoPod是一个指向函数的指针，它将被评估，点击事件将被触发。