Javascript：代码在加载时被调用，但应该在发生单击事件时运行_Javascript_Events_Event Handling

Javascript：代码在加载时被调用，但应该在发生单击事件时运行

javascript events

Javascript：代码在加载时被调用，但应该在发生单击事件时运行,javascript,events,event-handling,Javascript,Events,Event Handling,我试图理解Javascript事件处理。我喜欢在按下按钮并添加eventlistener时调用一些代码-我的代码： <html> <head> <title> PDSA #4.4: Event Registering </title> <script> function changeTheButton(btn){ btn.innerHTML = "Plea

我试图理解Javascript事件处理。我喜欢在按下按钮并添加eventlistener时调用一些代码-我的代码：

<html>
 <head>
    <title>
        PDSA #4.4: Event Registering
    </title>
    <script>
        function changeTheButton(btn){
            btn.innerHTML = "Please, don't press again!";
            alert("Changed the button");
        }

        function init(){
            btn = document.getElementById("button1");
            btn.addEventListener("click", changeTheButton(btn), false);
        }
    </script>
 </head>
 <body onload="init()">
    <form>
        <button id="button1">Don't press this button</button>
    </form>
 </body>
</html>


PDSA#4.4：事件注册
功能更改按钮（btn）{
btn.innerHTML=“请不要再按！”；
警报（“更改按钮”）；
}
函数init（）{
btn=document.getElementById（“按钮1”）；
btn.addEventListener（“单击”，更改按钮（btn），错误）；
}
不要按这个按钮

当我在Chrome或Firefox中打开此网站时，按钮上的文本已经是“请不要再按了！”并且在我做任何事情之前，警报已经打开

为什么会发生这种情况？我以为这会发生，当我按下按钮，而不是在加载

提前谢谢你的帮助安德烈

注意这句话：

btn.addEventListener("click", changeTheButton(btn), false);

实际上，您正在那里调用

change按钮

，导致出现

警报

。您可能希望将其注册为事件处理程序，从而将警报推迟到按下按钮：

btn.addEventListener("click", function() { changeTheButton(btn) }, false);

你可以随时观看比赛结果

您可能遇到的另一个问题是，按钮单击会导致页面重新加载，因为默认事件处理程序仍被调用。您可以通过在事件实例上调用

.preventDefault（）

来防止这种情况：

function changeTheButton(ev, btn) {
    alert("Changed the button");
    btn.innerHTML = "Please, don't press again!";
    ev.preventDefault();
}

function init(){
    btn = document.getElementById("button1");
    btn.addEventListener("click", function(ev) { 
        changeTheButton(ev, btn) 
    }, false);
}

嗨，谢谢你的快速回答。你能告诉我为什么当我点击警报上的“确定”时，按钮文本变回“不要按下此按钮”吗？我希望按钮文本在单击时保持为“请不要再按！”。@Andre:好吧，您只需切换

中的操作即可更改按钮（如果您想先提醒
，只需先提醒
；）即使我第一次执行警报，按钮上的文本在单击事件后仍会变回“请勿按下此按钮”。但我希望它保持“请不要再按！”。有什么想法吗？删除了一条评论，因为JSFIDLE中只有一个更新问题。对我来说也可以，但是文本仍然会变回。@Andre:是的，这是因为单击按钮的默认操作是提交表单，因此在这种情况下会重新加载页面。您可以对事件实例调用.preventDefault（）
。我将添加一个示例。