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