[javascript] 이벤트 리스너에 파라미터 전달하기

14 Dec 2023

javascript

웹 애플리케이션을 개발하다 보면 이벤트 리스너에 파라미터를 전달해야 하는 경우가 생기곤 합니다. 예를 들어, 버튼 클릭 이벤트에 대한 핸들러 함수를 정의할 때 버튼의 ID나 다른 데이터를 전달하고 싶을 수 있습니다. 이를 위해 다양한 방법을 사용할 수 있지만, 흔히 사용하는 방법을 소개하겠습니다.

1. 익명 함수로 감싸기

가장 간단한 방법은 익명 함수로 감싸는 것입니다. 아래의 예시를 통해 설명하도록 하겠습니다.

const button = document.getElementById('myButton');
const data = '전달할 데이터';

button.addEventListener('click', function() {
  handleButtonClick(data);
});

2. 클로저 활용

클로저를 사용하여 파라미터를 전달하는 방법도 있습니다. 아래의 예시를 참고해 주세요.

const button = document.getElementById('myButton');
const data = '전달할 데이터';

button.addEventListener('click', function(data) {
  return function() {
    handleButtonClick(data);
  }
}(data));

3. bind 메서드 활용

bind 메서드를 사용하여 파라미터를 전달할 수도 있습니다.

const button = document.getElementById('myButton');
const data = '전달할 데이터';

button.addEventListener('click', handleButtonClick.bind(null, data));

마무리

이제 이벤트 리스너에 파라미터를 전달하는 다양한 방법을 알아보았습니다. 각각의 방법은 상황에 맞게 적절히 활용할 수 있으니, 개발하고 있는 프로젝트의 요구사항에 맞게 선택하여 사용하시기 바랍니다.