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 중국어 웹사이트의 기타 관련 기사를 참조하세요!