정의 내에서 JavaScript 이벤트 리스너를 효과적으로 제거하는 방법은 무엇입니까?

리스너 정의 내에서 JavaScript 이벤트 리스너 제거

리스너 정의 내에서 이벤트 리스너를 제거하려고 하면 JavaScript 사용자는 다음과 같은 문제에 직면할 수 있습니다. 컨텍스트 바인딩. 이 문서에서는 이 문제를 해결하고 이벤트 리스너를 효과적으로 제거하는 접근 방식을 보여줍니다.

접근 방법 1: 명명된 함수 사용

익명 함수 대신 명명된 함수를 정의하고 할당합니다. 이벤트 리스너에게. 이렇게 하면 나중에 제거를 위해 함수를 참조할 수 있습니다.

var click_count = 0;

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

// Add the event listener
canvas.addEventListener('click', myClick);

접근 방법 2: 클릭 카운터 변수를 사용한 클로저

클로저를 사용하면 리스너 함수가 정의된 변수에 액세스할 수 있습니다. 범위를 벗어났습니다. 이 경우 클릭 카운터 변수를 함수 내에 캡슐화합니다.

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

// Add the event listener
canvas.addEventListener('click', myClick);

접근 방법 3: 클릭 카운터를 함수 인수로 사용

다른 요소에 자체 클릭 카운터가 필요한 경우 , 클릭 카운터를 인수로 사용하는 새 함수를 만듭니다.

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

// Add the event listener
canvas.addEventListener('click', myClick(0));

위 내용은 정의 내에서 JavaScript 이벤트 리스너를 효과적으로 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!