>웹 프론트엔드 >JS 튜토리얼 >addEventListener 함수에 인수를 어떻게 전달할 수 있나요?

addEventListener 함수에 인수를 어떻게 전달할 수 있나요?

Susan Sarandon
Susan Sarandon원래의
2024-12-11 20:10:11231검색

How Can I Pass Arguments to an addEventListener Function?

addEventListener 리스너 함수에 인수를 전달하는 방법

이벤트 리스너 함수에 인수를 전달하려는 시나리오에서 인수가 다음과 같은 상황에 직면할 수 있습니다. 함수 내에서는 접근이 불가능합니다. 이는 다음과 같이 함수에 변수를 할당할 때 발생할 수 있습니다.

var someVar = some_other_function();
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

여기서 문제는 이벤트 리스너의 함수 내에서 someVar 값을 사용할 수 없다는 것입니다.

A 더 나은 접근 방식: 이벤트 대상 매개변수 사용

이 문제를 해결하려면 이벤트 객체의 대상 속성을 활용하여 리스너에게 전달된 매개변수를 검색할 수 있습니다. 기능. 다음 예를 고려해 보세요.

const someInput = document.querySelector('button');
someInput.addEventListener('click', myFunc, false);
someInput.myParam = 'This is my parameter';

function myFunc(evt)
{
    window.alert(evt.currentTarget.myParam);
}

수정된 코드에서는

  • 입력 요소의 myParam 속성에 매개변수('This is my 매개변수')를 할당합니다.
  • myFunc 함수는 이벤트 리스너 범위 외부에서 정의됩니다.
  • 입력 요소를 클릭하면 myFunc 함수가 호출됩니다.
  • myFunc 함수 내에서 evt.currentTarget.myParam을 통해 매개변수에 액세스할 수 있습니다.

이 접근 방식을 사용하면 이벤트 리스너 함수에 인수를 효과적으로 전달할 수 있습니다. 원래 문제가 발생하지 않고.

위 내용은 addEventListener 함수에 인수를 어떻게 전달할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.