[javascript] 익명 함수로 addEventListener 인 EventListener를 제거하는 방법은 무엇입니까?

Program / 글쓴이 
function doSomethingWith(param)
{
    document.body.addEventListener(
        'scroll',
        function()
        {
            document.write(param);
        },
        false
    ); // An event that I want to remove later
}
setTimeout(
    function()
    {
        document.body.removeEventListener('scroll', HANDLER ,false);
            // What HANDLER should I specify to remove the anonymous handler above?
    },
    3000
);
doSomethingWith('Test. ');

답변

당신은 할 수 없습니다. 명명 된 함수를 사용하거나 어떻게 든 참조를 저장해야합니다.

var handler;

function doSomethingWith(param) {
    handler = function(){
        document.write(param);
    };
    document.body.addEventListener('scroll', handler,false);
}
setTimeout(function() {
     document.body.removeEventListener('scroll', handler ,false);
}, 3000);

가장 좋은 방법은 다른 핸들러를 식별하고 제거 할 수 있도록 구조화 된 방식으로 수행하는 것입니다. 위의 예에서 분명히 마지막 핸들러 만 제거 할 수 있습니다.

최신 정보:

고유 한 핸들러 핸들러 (:))를 만들 수 있습니다.

var Handler = (function(){
    var i = 1,
        listeners = {};

    return {
        addListener: function(element, event, handler, capture) {
            element.addEventListener(event, handler, capture);
            listeners[i] = {element: element,
                             event: event,
                             handler: handler,
                             capture: capture};
            return i++;
        },
        removeListener: function(id) {
            if(id in listeners) {
                var h = listeners[id];
                h.element.removeEventListener(h.event, h.handler, h.capture);
                delete listeners[id];
            }
        }
    };
}());

그런 다음 다음과 함께 사용할 수 있습니다.

function doSomethingWith(param) {
    return Handler.addListener(document.body, 'scroll', function() {
        document.write(param);
    }, false);
}

var handler = doSomethingWith('Test. ');

setTimeout(function() {
     Handler.removeListener(handler);
}, 3000);

데모

답변

할 수 없습니다. 함수에 대한 참조가 필요합니다.

function doSomethingWith(param) {
   var fn = function(){ document.write(param); };
   document.body.addEventListener('scroll', fn, false);
   setTimeout(function(){ document.body.removeEventListener('scroll', fn, false); }, 3000);
}
doSomethingWith('Test. ');

답변

다음과 같이 할 수도 있습니다.

const ownAddEventListener = (scope, type, handler, capture) => {
  scope.addEventListener(type, handler, capture);
  return () => {
    scope.removeEventListener(type, handler, capture);
  }
}

그런 다음 다음과 같이 이벤트 리스너를 제거 할 수 있습니다.

// Add event listener
const disposer = ownAddEventListener(document.body, 'scroll', () => {
  // do something
}, false);

// Remove event listener
disposer();

답변

IE를 지원할 필요가 없다면 once 옵션을 사용할 수 있습니다.

[Element].addEventListener('click', () => {...}, {
  capture: false,
  once: true
});

답변