javascript - 页面重新加载时触发按钮单击事件

Question

我在向按钮元素添加事件时遇到问题。

问题：

应该是事件处理程序的函数在页面重新加载和单击按钮时触发。

我希望它仅在单击按钮时触发。

这是我的代码：

index.html 文件：

<form id="contact_form">
    (Some form fields here)
    <button id="form_submit" value="send">Send</button>
</form>
<script src="contact_form.js"></script>

contact_form.js 文件：

var submit_button = document.getElementById('form_submit');

submit_button.addEventListener("click", test_click_event());

function test_click_event()
{
     alert("Button clicked");
}

我正在使用 Chrome 进行调试。

Answer 1

submit_button.addEventListener("click", test_click_event);

不需要括号

Answer 2

() 括号调用函数执行删除它们或使用这个：

var submit_button = document.getElementById('form_submit');

    submit_button.addEventListener("click", function(){test_click_event();});

    function test_click_event()
    {
         alert("Button clicked");
    }

演示

Answer 3

您可以保留括号，但您需要添加一个匿名函数。见这里：https ://www.w3schools.com/jsref/met_document_addeventlistener.asp

例如：

submit_button.addEventListener("click", function (){
    test_click_event();
});