자체 정의 내에서 JavaScript 이벤트 리스너를 제거하려면 어떻게 해야 합니까?

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

JavaScript에서 이벤트 리스너로 작업할 때 리스너를 제거해야 하는 시나리오가 있을 수 있습니다. 다른 청취자의 정의 내에서. 이러한 상황은 특정 클릭 수에 도달하는 등 특정 조건이 충족될 때 발생할 수 있습니다.

해결책:

자체 정의 내에서 이벤트 리스너를 제거하려면 명명된 함수를 활용할 수 있습니다. addEventListener() 메서드에 익명 함수를 할당하는 대신 명명된 함수를 생성하여 두 번째 인수로 전달합니다.

var click_count = 0;

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

canvas.addEventListener('click', myClick);

이 예에서 myClick은 addEventListener() 메서드에 할당된 명명된 함수입니다. . 클릭 이벤트가 트리거되면 myClick 함수는 click_count 변수를 증가시킵니다. 개수가 50에 도달하면 리스너는 RemoveEventListener()를 사용하여 제거됩니다.

대체 접근 방식:

익명 기능을 사용하거나 클릭 카운터 주변을 닫아야 하는 경우 변수를 사용하여 클로저를 만들 수 있습니다. 클로저를 사용하면 외부 함수의 실행이 완료된 후에도 내부 함수가 외부 범위의 변수에 액세스할 수 있습니다.

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

canvas.addEventListener('click', myClick);

여기서 myClick 함수는 핸들러 함수와 click_count 변수를 캡슐화하는 내부 클로저를 생성합니다. .

여러 청취자:

여러 청취자를 추가해야 하는 경우 자체 카운터가 있는 리스너의 경우 자체 카운터로 새 함수를 생성하는 고차 함수를 생성할 수 있습니다.

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

canvas.addEventListener('click', myClick(0));

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