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

EventListener リスナー関数に引数を渡す

addEventListener 呼び出し内でリスナー関数に引数を渡す必要があるシナリオでは、引数の値リスナー内ではアクセスできない場合があります。これは、関数がリスナーのスコープ内の新しい変数として扱われるためです。

解決策: ターゲット属性の利用

この問題を解決するには、ターゲット属性の使用を検討してください。リスナー関数内のイベント オブジェクトの。イベント ターゲットにカスタム プロパティを設定すると、リスナー内の目的の引数にアクセスできます。

例:

HTML ボタンと JavaScript イベント リスナーを考えてみましょう。

<button>

const myButton = document.getElementById('myButton');

// Set a custom property on the button target
myButton.myParam = 'This is my parameter';

// Add an event listener to the button
myButton.addEventListener('click', (event) => {
  // Retrieve the custom property from the event target
  const myParameter = event.currentTarget.myParam;

  // Do something with the parameter
  alert(`My parameter: ${myParameter}`);
});

この例では、ボタンがクリックされると、myParam プロパティの値は次のようになります。イベントターゲットから取得され、アラートに表示されます。このアプローチにより、リスナー関数に効果的に引数を渡し、リスナーのスコープ内でそれらの関数にアクセスできるようになります。

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