removeEventListener

출처 : 

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

EventTarget.removeEventListener() 메소드는 이전에 등록되어 있던 EventListener 를 제거한다.

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

파라미터

type

제거할 이벤트 타입 문자열

listener

이벤트 타겟에서 제거할 이벤트 리스너 함수

options

이벤트 리스터에 대한 특성을 지정하는 옵션 오브젝트이다.

capture : 돔 트리 안에서 어떠한 이벤트 타겟 하위로 가기 전, 등록된 리스너로 보내지는 유형의 이벤트를 나타내는 Boolean이다.

passive : 리스너가 결코 preventDefault()를 부르지 않을 것인지를 나타내는 Boolean이다. 만약 그것을 호출할 경우 유저 에이전트는 그것을 무시하고 콘솔 경고를 일으킬 것이다.

mozSystemGroup : 오직 XBL, FireFox, chrome 에서 사용가능하다. 이 Boolean은 시스템 그룹에 리스너가 추가되었는지 유무를 정의한다.

useCapture

제거되는 EventListener가 capturing listener로서 등록될지 아닐지를 기술한다. 만약 이 매개변수가 없을 경우 기본값은 false이다.

만약 EventListener가 두번 등록되어 있다면 하나는 잡혔지만 하나가 그러지 않을 경우 각각을 따로 제거한다.

capturing 리스너의 제거는 동일한 리스터의 non-capturing버전에 영향을 주지 않고 그 역도 동일하다.

Return Value : Void

Notes

만약 이벤트 리스너가 이벤트로서 동작하는 동한 이벤트 타겟에서 제거가 된다면, 현재의 동작에 의해서 촉발되지는 않는다. 이벤트 리스너는 제거된 후에 등록되는 이벤트에 대해서 호출되지는 않겠지만 다시 그 이벤트에 리스너를 부착시킬수는 있다.

이벤트 타겟에 현재 등록된 이벤트 리스너가 없는 arguments와 함께 removeEventListener() 를 부르는 것은 아무런 효과를 가져오지 않는다.

Example

This example shows how to add a click-based event listener and remove a mouseover-based event listener.

var body =
        document.querySelector('body'),
    clickTarget =
        document.getElementById('click-target'),
    mouseOverTarget =
        document.getElementById('mouse-over-target'),
    toggle = false;

function makeBackgroundYellow() {
    'use strict';

    if (toggle) {
        body.style.backgroundColor = 'white';
    } else {
        body.style.backgroundColor = 'yellow';
    }

    toggle = !toggle;
}

clickTarget.addEventListener('click',
    makeBackgroundYellow,
    false
);

mouseOverTarget.addEventListener('mouseover', function () {
    'use strict';

    clickTarget.removeEventListener('click',
        makeBackgroundYellow,
        false
    );
});