JavaScript でイベント リスナー関数に引数を渡すにはどうすればよいですか?

イベント リスナー: リスナー関数に引数を渡す

addEventListener メソッドを使用してイベント リスナーをアタッチする場合、次の引数を渡す必要がある場合があります。リスナー関数への引数。このようなシナリオの 1 つは、リスナーのスコープ外で定義された変数の値を取得することです。

シナリオと問題

次のコードを考えてみましょう:

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

ここで、someVar はリスナー関数の外で定義された変数であり、その値を引数として some_function に渡すことを目的としています。 「クリック」イベントが発生します。ただし、リスナー関数内では、someVar が新しい変数として扱われるため、その意図した値にアクセスできないという問題が発生します。

提案された解決策: イベント ターゲットのプロパティの利用

引数を明示的に渡す代わりに、イベント ターゲットのプロパティにアクセスして必要な情報を取得することを検討してください。上記の例では、以下に示すように、カスタム プロパティ myParam を someObj にアタッチできます。

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 内で、evt.currentTarget.myParam を参照することでパラメータ値にアクセスできるようになります。このメソッドにより、引数を明示的に渡す必要がなくなり、正しい値が確実に取得されます。

以上がJavaScript でイベント リスナー関数に引数を渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。