首頁 >web前端 >js教程 >如何將參數傳遞給 addEventListener 函數?

如何將參數傳遞給 addEventListener 函數?

Susan Sarandon
Susan Sarandon原創
2024-12-11 20:10:11230瀏覽

How Can I Pass Arguments to an addEventListener Function?

如何傳送參數給addEventListener 監聽器函數

在我們想要傳送參數給事件監聽器函式的場景中,我們可能會遇到參數為函式內無法訪問。當我們將變數指派給函數時,可能會發生這種情況,如下所示:

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

這裡,問題是 someVar 的值在事件偵聽器的函數中不可用。

A更好的方法:使用事件目標的參數

為了解決這個問題,我們可以利用事件物件的 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);
}

在此修改後的程式碼中:

  • 我們將參數(「這是我的參數」)指派給輸入元素的 myParam 屬性。
  • 我們的 myFunc 函數是在事件偵聽器的範圍之外定義的。
  • 按一下輸入元素時, myFunc 函數會被呼叫。
  • 在 myFunc 函數中,我們可以透過 evt.currentTarget.myParam 存取我們的參數。

這種方法有效地允許我們將參數傳遞給事件偵聽器函數沒有遇到原來的問題。

以上是如何將參數傳遞給 addEventListener 函數?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
上一篇:雲端電話下一篇:雲端電話