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 中国語 Web サイトの他の関連記事を参照してください。