매개 변수로 JavaScript 이벤트 리스너를 처리합니다 – Smashing Magazine

JavaScript 이벤트 리스너는 상호 작용이 필요한 거의 모든 웹 응용 프로그램에 존재하기 때문에 매우 중요합니다. 일반적으로 일반적으로 제대로 관리하는 것이 중요합니다. 부적절하게 관리되는 이벤트 청취자는 메모리 누출로 이어질 수 있으며 때로는 극단적 인 경우 성능 문제를 일으킬 수 있습니다.

진짜 문제는 다음과 같습니다. JavaScript 이벤트 리스너는 종종 추가 된 후에 제거되지 않습니다. 그리고 그들이 추가 될 때, 그들은 대부분의 경우 매개 변수를 요구하지 않습니다. 드문 경우를 제외하고는 다소 까다로워집니다.

이벤트 핸들러와 함께 매개 변수를 사용해야하는 일반적인 시나리오는 동적 작업 목록이있는 경우 목록의 각 작업에 작업 ID를 매개 변수로 사용하여 작업을 제거하는 이벤트 핸들러에 “삭제”버튼이 있습니다. 이와 같은 상황에서는 삭제 된 요소를 쓰레기 수집으로 알려진 프로세스 인 삭제 된 요소를 성공적으로 정리할 수 있도록 작업이 완료되면 이벤트 리스너를 제거하는 것이 좋습니다.

이벤트 청취자를 추가 할 때 일반적인 실수

이벤트 핸들러에 매개 변수를 추가 할 때 매우 일반적인 실수는 내부에 매개 변수가있는 함수를 호출합니다. addEventListener() 방법. 이것이 내 말입니다.

button.addEventListener('click', myFunction(param1, param2));

브라우저는 클릭 이벤트가 발생했는지 여부에 관계없이 즉시 함수를 호출 하여이 줄에 응답합니다. 다시 말해,이 기능은 연기되지 않고 즉시 호출되므로 클릭 이벤트가 실제로 발생할 때 결코 발생하지 않습니다.

경우에 따라 다음 콘솔 오류를받을 수도 있습니다.

이 오류는 addEventListener 메소드는 JavaScript 함수 만 허용 할 수 있습니다. handleEvent() 방법 또는 간단히 null. 이 오류를 피하는 빠르고 쉬운 방법은 두 번째 매개 변수를 변경하는 것입니다. addEventListener 화살표 또는 익명 함수에 대한 방법.

button.addEventListener('click', (event) => {
  myFunction(event, param1, param2); // Runs on click
});

화살과 익명 기능을 사용하는 유일한 딸꾹질은 전통적인 것과 함께 제거 할 수 없다는 것입니다. removeEventListener() 방법; 당신은 사용해야합니다 AbortController간단한 경우에는 과잉 일 수 있습니다. AbortController 여러 이벤트 리스너가 있으면 한 번에 제거 할 때 빛납니다.

하나 또는 두 개의 이벤트 청취자가 제거 할 간단한 경우. removeEventListener() 메소드는 여전히 유용합니다. 그러나 그것을 사용하려면 청취자에 대한 참조로 기능을 저장해야합니다.

이벤트 처리기와 함께 매개 변수 사용

이벤트 핸들러와 매개 변수를 포함시키는 방법에는 여러 가지가 있습니다. 그러나이 데모의 목적을 위해 우리는 다음 두 가지에 초점을 두어야합니다.

옵션 1 : 화살표 및 익명 기능

화살표와 익명 기능을 사용하는 것이 작업을 완료하는 가장 빠르고 쉬운 방법입니다.

화살표 및 익명 함수를 사용하여 매개 변수가있는 이벤트 핸들러를 추가하려면 먼저 이벤트 리스너에 첨부 된 화살표 기능 내부에서 생성 할 기능을 호출해야합니다.

const button = document.querySelector("#myButton");

button.addEventListener("click", (event) => {
  handleClick(event, "hello", "world");
});

그런 다음 매개 변수로 기능을 만들 수 있습니다.

function handleClick(event, param1, param2) {
  console.log(param1, param2, event.type, event.target);
}

이 방법을 사용하면 이벤트 리스너를 제거하려면 AbortController. 이벤트 리스너를 제거하기 위해 새로운 것을 만듭니다 AbortController 물체를 검색합니다 AbortSignal 그것의 개체 :

const controller = new AbortController();
const { signal } = controller;

다음으로, 우리는 통과 할 수 있습니다 signal 에서 controller 옵션으로 removeEventListener() 방법:

button.addEventListener("click", (event) => {
  handleClick(event, "hello", "world");
}, { signal });

이제 우리는 호출하여 이벤트 리스너를 제거 할 수 있습니다 AbortController.abort():

controller.abort()

옵션 2 : 폐쇄

JavaScript의 클로저는 이벤트 핸들러에 도움이되는 또 다른 기능입니다. 유형 오류를 일으킨 실수를 기억하십니까? 그 실수는 폐쇄로 수정 될 수 있습니다. 구체적으로, 클로저를 사용하면 함수가 외부 범위에서 변수에 액세스 할 수 있습니다.

다시 말해, 외부 기능에서 이벤트 핸들러에 필요한 매개 변수에 액세스 할 수 있습니다.

function createHandler(message, number) {
  // Event handler
  return function (event) {
  console.log(`${message} ${number} - Clicked element:`, event.target);
    };
  }

  const button = document.querySelector("#myButton");
  button.addEventListener("click", createHandler("Hello, world!", 1));
}

이것은 다른 함수를 반환하는 함수를 설정합니다. 그런 다음 생성 된 함수는 두 번째 매개 변수로 호출됩니다. addEventListener() 내부 함수가 이벤트 핸들러로 반환되도록 방법. 폐쇄의 힘으로, 외부 기능의 파라미터는 내부 기능에 사용할 수있게됩니다.

어떻게 event 내부 기능에 객체를 사용할 수 있습니다. 내부 기능이 이벤트 핸들러로 첨부되는 것이기 때문입니다. 이벤트 객체는 이벤트 핸들러이기 때문에 기능으로 자동 전달됩니다.

이벤트 리스너를 제거하기 위해 사용할 수 있습니다 AbortController 우리가 전에했던 것처럼. 그러나 이번에는 우리가 어떻게 removeEventListener() 대신 방법.

In order for the removeEventListener 작업 방법,에 대한 참조 createHandler 기능을 저장하고 사용해야합니다 addEventListener 방법:

function createHandler(message, number) {
  return function (event) {
    console.log(`${message} ${number} - Clicked element:`, event.target);
  };
}
const handler = createHandler("Hello, world!", 1);
button.addEventListener("click", handler);

이제 이벤트 리스너를 다음과 같이 제거 할 수 있습니다.

button.removeEventListener("click", handler);

결론

더 이상 메모리 누출을 방지 할 필요가 없을 때마다 항상 이벤트 리스너를 제거하는 것이 좋습니다. 대부분의 경우 이벤트 처리기에는 매개 변수가 필요하지 않습니다. 그러나 드문 경우에는 그렇습니다. 클로저와 같은 JavaScript 기능 사용 AbortController그리고 removeEventListener이벤트 핸들러를 사용하여 매개 변수 처리가 가능하고 잘 지원됩니다.

(GG, YK)