按鈕單擊事件在頁面重新加載時觸發

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();
});