JavaScript에서 이벤트 리스너 함수에 인수를 어떻게 전달할 수 있습니까?

이벤트 리스너: 리스너 함수에 인수 전달

addEventListener 메소드를 사용하여 이벤트 리스너를 연결할 때 전달해야 하는 상황이 있을 수 있습니다. 리스너 함수에 대한 인수입니다. 그러한 시나리오 중 하나는 리스너 범위 외부에 정의된 변수의 값을 검색하는 것입니다.

시나리오 및 문제

다음 코드를 고려하세요.

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