>웹 프론트엔드 >JS 튜토리얼 >자체 핸들러 내에서 JavaScript 이벤트 리스너를 안전하게 제거하려면 어떻게 해야 합니까?

자체 핸들러 내에서 JavaScript 이벤트 리스너를 안전하게 제거하려면 어떻게 해야 합니까?

Barbara Streisand
Barbara Streisand원래의
2024-12-07 14:51:12584검색

How Can I Safely Remove JavaScript Event Listeners Inside Their Own Handlers?

이벤트 핸들러 내에서 JavaScript 이벤트 리스너 제거

JavaScript에서는 동일한 이벤트 핸들러 정의 내에서 이벤트 리스너를 제거하는 것이 어려울 수 있습니다. 이 문제를 해결하려면 다음 전략을 고려하세요.

명명된 함수 사용

한 가지 접근 방식은 명명된 함수를 사용하는 것입니다.

var click_count = 0;

function myClick(event) {
    click_count++;
    if (click_count == 50) {
        // to remove
        canvas.removeEventListener('click', myClick);
    }
}

// to add
canvas.addEventListener('click', myClick);

간접 이벤트 처리를 통한 클로저

또는 간접 이벤트 처리를 사용하여 클릭 카운터를 닫을 수도 있습니다. 패턴:

var myClick = (function (click_count) {
    var handler = function (event) {
        click_count++;
        if (click_count == 50) {
            // to remove
            canvas.removeEventListener('click', handler);
        }
    };
    return handler;
})(0);

// to add
canvas.addEventListener('click', myClick);

함수 발생기 사용

각 요소에 자체 카운터가 필요한 경우 함수 발생기를 사용할 수 있습니다.

var myClick = function (click_count) {
    var handler = function (event) {
        click_count++;
        if (click_count == 50) {
            // to remove
            canvas.removeEventListener('click', handler);
        }
    };
    return handler;
};

// to add
canvas.addEventListener('click', myClick(0));

위 내용은 자체 핸들러 내에서 JavaScript 이벤트 리스너를 안전하게 제거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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