이벤트 리스너가

제프 포스닉
제프 포스닉

깜짝 퀴즈: addEventListener()에 전달된 세 번째 매개변수의 목적은 무엇인가요?

addEventListener()가 매개변수 두 개만 사용한다고 생각하거나 버블과 관련이 있다는 애매한 이해로 항상 false 값을 하드코딩한다고 해도 당황하지 마세요.

좀 더 구성 가능한 addEventListener()

addEventListener() 메서드는 웹 초창기 이후 많은 발전을 이루었으며 새로운 기능은 세 번째 매개변수의 강화된 버전을 통해 구성되었습니다. 메서드 정의의 최근 변경사항으로 개발자는 구성 객체를 통해 추가 옵션을 제공할 수 있으며 불리언 매개변수가 있거나 옵션이 지정되지 않은 경우 이전 버전과의 호환성을 유지할 수 있습니다.

Chrome 55에서는 passive (Chrome 51에서 구현됨) 및 capture 옵션 (Chrome 49에서 구현됨)과 함께 이 구성 객체에 once 옵션 지원이 추가되었음을 알려드립니다. 예를 들면 다음과 같습니다.

element.addEventListener('click', myClickHandler, {
    once: true,
    passive: true,
    capture: true
});

이러한 옵션을 자신의 사용 사례에 적절하게 조합할 수 있습니다.

자택 청소의 이점

이것이 새로운 once 옵션을 사용하는 문법입니다. 무엇을 해야 할까요? 간단히 말해 '하나의 완료' 사용 사례에 맞춰진 이벤트 리스너를 제공합니다.

기본적으로 이벤트 리스너는 처음 호출된 후에도 유지되며, 일부 이벤트 유형(예: 여러 번 클릭할 수 있는 버튼)에서는 이 상태가 필요합니다. 하지만 다른 용도에서는 이벤트 리스너를 계속 사용할 필요가 없으며 한 번만 실행해야 하는 콜백이 있는 경우 원치 않는 동작이 발생할 수 있습니다. 상태 관리 개발자는 항상 다음과 같은 패턴에 따라 removeEventListener()를 사용하여 명시적으로 정리할 수 있습니다.

element.addEventListener('click', function cb(event) {
    // ...one-time handling of the click event...
    event.currentTarget.removeEventListener(event.type, cb);
});

새로운 once 매개변수를 사용하는 동등한 코드는 더 깔끔하며 이벤트 이름 (이전 예의 event.type) 또는 콜백 함수 참조 (cb)를 추적하지 않아도 됩니다.

element.addEventListener('click', function(event) {
    // ...one-time handling of the click event...
}, {once: true});

또한 이벤트 핸들러를 정리하면 콜백 함수와 연결된 범위를 폐기하여 해당 범위에서 캡처된 모든 변수가 가비지 컬렉션되도록 허용하여 메모리 효율성을 제공할 수 있습니다. 다음은 차이를 만드는 한 가지 예입니다.

function setUpListeners() {
    var data = ['one', 'two', '...etc.'];

    window.addEventListener('load', function() {
    doSomethingWithSomeData(data);
    // data is now part of the callback's scope.
    });
}

기본적으로 load 이벤트 리스너 콜백은 다시 사용되지 않더라도 실행이 완료되면 범위 내에 있습니다. data 변수는 콜백 내에서 사용되므로 범위 내에 유지되며 가비지를 수집하지 않습니다. 하지만 once 매개변수를 통해 콜백이 삭제된 경우 함수 자체와 범위를 통해 활성 상태로 유지되는 모든 항목이 가비지 컬렉션 후보가 될 수 있습니다.

브라우저 지원

Chrome 55 이상, Firefox 50 이상, Safari의 기술 미리보기 7 이상에서는 once 옵션을 기본적으로 지원합니다.

많은 JavaScript UI 라이브러리는 이벤트 리스너를 편리하게 만들 수 있는 메서드를 제공하며 일부 라이브러리에는 일회성 이벤트를 정의하는 단축키가 있습니다. 가장 주목할 만한 것은 jQuery의 one() 메서드입니다. 안드레아 지암마르치dom4 라이브러리에 포함된 폴리필도 사용할 수 있습니다.

감사합니다.

이 게시물의 샘플 코드에 관해 의견을 보내 주신 잉바르 스테파니안님께 감사드립니다.