자바 스크립트 : 이벤트 리스너 제거

리스너 정의 내에서 이벤트 리스너를 제거하려고합니다.

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/ .

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

@Cybernate의 솔루션이 작동하지 않으면 트리거를 자체 기능으로 분리하여 참조 할 수 있도록하십시오.

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

누군가 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의 답변은 훌륭하게 작동합니다. :)

핸들러 함수를 미리 정의해야 할 수도 있습니다.

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

이를 통해 처리기 자체에서 이름으로 핸들러를 제거 할 수 있습니다.

이것을 시도하십시오, 그것은 나를 위해 일했습니다.

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