Question

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

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

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

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

Answer 1

我看到两个主要问题：

onClick 应该是 onclick;
logInToPod() 应该是 logInToPod。

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

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

Here 一个 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 是一个指向函数的指针，它将在点击事件被触发时进行评估。

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

2 个答案: