為什麼 `addEventListener` 立即呼叫我的函數而不是在事件觸發器上呼叫？

「addEventListener 在沒有提示的情況下呼叫函數」解釋

將事件監聽器附加到元素時，我們希望函數僅在以下情況下執行事件發生。但在某些情況下，確保該函數不會過早呼叫可能會很棘手。

考慮以下 HTML 程式碼：

<span></span>

我們想要向第二個連結：

second.addEventListener('click', message_me('shazam'));

其中「message_me」是顯示訊息的外部函數。令人驚訝的是，這段程式碼甚至在我們點擊第二個連結之前就立即觸發了「message_me」函數。

問題

問題在於 JavaScript 處理函數引用的方式作為「addEventListener」的第二個參數。 JavaScript 需要對函數的引用，但在有問題的程式碼中，會立即呼叫函數“message_me('shazam')”，並傳遞其結果。

解決方案

有兩種方法可以解決此問題：

• 建立匿名函數： 將'message_me'包裝在匿名函數中以返回函數引用：

second.addEventListener('click', function() {
    message_me('shazam');
});

此解決方案確保僅在單擊第二個連結時調用 'message_me'。

• 傳回一個函數'message_me': 修改'message_me' 以回傳函數引用：

function message_me(m_text) {
    return function() {
        alert(m_text);
    };
}

second.addEventListener('click', message_me('shazam'));

在這種情況下，' addEventListener' 接收對點擊事件時將執行的函數的參考發生。

以上是為什麼 `addEventListener` 立即呼叫我的函數而不是在事件觸發器上呼叫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！