자바스크립트 이벤트 수신기를 제거하려면 어떻게 해야 합니까?

자바스크립트 이벤트 수신기를 제거하려면 어떻게 해야 합니까?

수신기 정의 내에서 이벤트 수신기를 제거하려고 합니다.

canvas.addEventListener('click', function(event) {
    click++;
    if(click == 50) {
        // remove this event listener here!
    }
// More code here ...

내가 어떻게 그럴 수 있을까?이 = 이벤트...

명명된 함수를 사용해야 합니다.

그리고 또.click증분하려면 변수가 핸들러 외부에 있어야 합니다.

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);

---

당신은 근처에서 문을 닫을 수 있습니다.click_counter다음과 같은 변수:

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 ));

   canvas.addEventListener('click', function(event) {
      click++;
      if(click == 50) {
          this.removeEventListener('click',arguments.callee,false);
      }

해야 돼요.

명명된 함수 식을 사용할 수 있습니다(이 경우 함수의 이름은abc), 예를 들어 다음과 같습니다.

let click = 0;
canvas.addEventListener('click', function abc(event) {
    click++;
    if (click >= 50) {
        // remove event listener function `abc`
        canvas.removeEventListener('click', abc);
    }
    // More code here ...
}

빠르고 더러운 작업 예제: http://jsfiddle.net/8qvdmLz5/2/ .

명명된 함수 표현식에 대한 자세한 내용은 http://kangax.github.io/nfe/ 을 참조하십시오.

@Cybernate의 솔루션이 작동하지 않는 경우 트리거를 자체 기능으로 분리하여 참조할 수 있도록 합니다.

clickHandler = function(event){
  if (click++ == 49)
    canvas.removeEventListener('click',clickHandler);
}
canvas.addEventListener('click',clickHandler);

element.querySelector('.addDoor').onEvent('click', function (e) { });
element.querySelector('.addDoor').removeListeners();


HTMLElement.prototype.onEvent = function (eventType, callBack, useCapture) {
this.addEventListener(eventType, callBack, useCapture);
if (!this.myListeners) {
    this.myListeners = [];
};
this.myListeners.push({ eType: eventType, callBack: callBack });
return this;
};


HTMLElement.prototype.removeListeners = function () {
if (this.myListeners) {
    for (var i = 0; i < this.myListeners.length; i++) {
        this.removeEventListener(this.myListeners[i].eType, this.myListeners[i].callBack);
    };
   delete this.myListeners;
};
};

이벤트 수신기를 사용하지 않고 제거할 수 있는 메커니즘을 제공하는 현재 JavaScript DOM 사양의 일부는 아무도 다루지 않은 것 같습니다.removeEventListenerhttps://dom.spec.whatwg.org/ #concept-event-properties를 보면 이벤트 수신을 제어하기 위해 전달할 수 있는 여러 가지 속성이 있음을 알 수 있습니다.

{
  type (a string)
  callback (null or an EventListener object)
  capture (a boolean, initially false)
  passive (a boolean, initially false)
  once (a boolean, initially false)
  signal (null or an AbortSignal object)
  removed (a boolean for bookkeeping purposes, initially false) 
}

이 목록에는 유용한 속성이 많이 있지만 이벤트 수신기를 제거하기 위해서는signalJS 엔진에 이벤트 수신기를 호출하는 것만으로 이벤트 수신기를 제거하도록 할 수 있기 때문에 (2020년 말에 DOM 레벨 3에 추가됨) 우리가 사용하고 싶은 속성.abort()번거롭게 하는 대신에removeEventListener:

const canvasListener = (new AbortController()).signal;

canvas.addEventListener('click', () => {
  click++;
  if (click === 50) {
    canvasListener.abort();
  } else {
    doSomethingWith(click);
  }
}, {
  signal: canvasListener 
});

(참고로 이는 다음을 사용하지 않습니다.useCaptureflag, useCapture 플래그는 본질적으로 완전히 쓸모가 없기 때문입니다.)

완료: JS 엔진이 중단되고 이벤트 청취자가 정리됩니다.처리 기능에 대한 참조를 유지하지 않음, 전화를 걸었는지 확인하지 않음removeEventListener우리가 부른 것과 똑같은 특성으로addEventListener그냥 듣는 사람을 취소합니다.

다음과 같이 처리기 기능을 미리 정의해야 할 수도 있습니다.

var myHandler = function(event) {
    click++; 
    if(click == 50) { 
        this.removeEventListener('click', myHandler);
    } 
}
canvas.addEventListener('click', myHandler);

이렇게 하면 내부에서 이름별로 처리기를 제거할 수 있습니다.

만약 누군가가 jquery를 사용한다면, 그는 다음과 같이 할 수 있습니다.

var click_count = 0;
$( "canvas" ).bind( "click", function( event ) {
    //do whatever you want
    click_count++;
    if ( click_count == 50 ) {
        //remove the event
        $( this ).unbind( event );
    }
});

그것이 누군가를 도울 수 있기를 바랍니다.@user113716이 제공한 답변은 잘 작동합니다 :)

이를 위한 방법은 jquery를 사용하는 것이므로 다음과 같이 사용할 수 있습니다.

canvas.click(yourfunction);

그런 다음 다음으로 모든 이벤트 수신기를 분리할 수 있습니다.

canvas.off();

이것 좀 먹어봐요, 저한테 효과가 있었어요.

<button id="btn">Click</button>
<script>
 console.log(btn)
 let f;
 btn.addEventListener('click', f=function(event) {
 console.log('Click')
 console.log(f)
 this.removeEventListener('click',f)
 console.log('Event removed')
})  
</script>

언급URL : https://stackoverflow.com/questions/4402287/how-can-i-remove-a-javascript-event-listener