如何在 JavaScript 中將參數傳遞給 `addEventListener` 監聽器函數？

向 addEventListener 監聽器函數傳遞參數

在某些場景下，可能需要向 addEventListener 的監聽器函數傳遞參數。以下程式碼片段突顯了可能需要此操作的常見情況：

var someVar = some_other_function();
someObj.addEventListener("click", function() {
  some_function(someVar);
}, false);

在這種情況下， someVar 是在偵聽器函數外部定義的，但旨在在偵聽器函數內使用。但是，由於 JavaScript 的作用域規則，someVar 可能會被識別為偵聽器函數內的新變數。

解決方案：從事件目標檢索參數

而不是嘗試將參數直接傳遞給偵聽器函數，考慮從 event.target 屬性獲取它們。此方法涉及向事件目標新增自訂屬性。

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';
function myFunc(evt) {
  window.alert(evt.currentTarget.myParam);
}

在此範例中，為按鈕元素指派了一個名為 myFunc 的事件偵聽器函數。自訂屬性 myParam 被加入到按鈕並設定為特定值（「這是我的參數」）。

按一下按鈕時，將使用事件物件作為參數執行 myFunc 函數。透過存取 event.currentTarget 屬性，然後存取自訂 myParam 屬性，可以擷取並顯示值（「這是我的參數」）。

此技術允許將參數傳遞給事件偵聽器函數更方便、更可靠的方式。

以上是如何在 JavaScript 中將參數傳遞給 `addEventListener` 監聽器函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！