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

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

<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>

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

为什么会这样？我希望当我按下按钮而不是加载时会发生这种情况。

提前感谢您的任何帮助安德烈

请看这一行：

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

你实际上在那里打电话给changeTheButton，导致alert.您可能希望将其注册为事件处理程序，从而将警报推迟到按下按钮：

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

您可以在jsFiddle上观看结果。

您可能会遇到的另一个问题是，单击按钮会导致页面重新加载，因为仍会调用默认事件处理程序。您可以通过在事件实例上调用 .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);
}

演示。

相关内容

最新更新

热门标签：