handleEvent 와 addEventListener

一.handleEvent 란 무엇인가

addEventListener(strEventType, func, false/true);

이것이 가장 일반적인 이벤트 핸들러 추가 방식일 것입니다. 실제로 두 번째 매개변수는 handleEvent 속성을 가진 객체也可以是입니다. 예를 들어:

var obj = {
    // ...
    handleEvent: function() {
        // ...
        console.log('event fired');
    }
}
document.body.addEventListener('click', obj, false);

DOM2 급 이벤트 는 add/removeEventListener, dispatchEvent, stopPropagation, preventDefault, initEvent, createEvent 등의 메서드를 정의하며, add/removeEventListener 의 두 번째 매개변수 타입은 EventListener 입니다。EventListener 인터페이스 정의 에서 handleEvent 메서드 구현이 요구됨을 알 수 있습니다

다시 말해, Eventlistener 를 구현하는 방법은 두 가지입니다:

function 객체는 기본적으로 Eventlistener 인터페이스를 구현합니다
객체에 handleEvent 메서드를 구현합니다

자세한 내용은 DOM3 급 event listener 를 참조하십시오

二.handleEvent 사용의 장단점

1.this 의 방향

addEventListener('click', obj, false); 방식으로 이벤트 핸들러를 추가한 후, 이벤트 처리 함수 obj.handleEvent 내의 this 는 자연스럽게 obj 를 가리킵니다

addEventListener(strEventType, func, false/true); 방식으로 이벤트 핸들러를 추가한 후, 이벤트 처리 함수 func 내의 this 는 이벤트 핸들러의 호스트 요소를 가리킵니다 (간단히 말해 ele.addEventListener 의 ele 입니다). 예를 들어:

var ele = document.getElementById('test');
function handler(e) {
    console.log(this === ele);  // true
}
ele.addEventListener('click', handler, false);

addEventListener('click', obj, false); 를 사용하는 장점은 obj 객체의 프라이빗 속성을 직접 사용할 수 있다는 것입니다. 비교해 보겠습니다:

var obj = {
    // ...
    attr: 1,
    handleEvent: function() {
        // ...
        console.log(this.attr); // undefined. 이벤트 발생 후 this 는 호스트 요소 body 를 가리키며, body 에는 attr 속성이 없음
    }
}
document.body.addEventListener('click', obj.handleEvent, false);

2.이벤트 핸들러의 동적 변경

이벤트 핸들러를 동적으로 변경할 수 있습니다. 예를 들어: obj.handleEvent = obj.handler2; 또는 obj.handleEvent = fun;. 매우 편리하며, 먼저 remove 하고 add 할 필요가 없습니다

3.단점

단점은 호환성이 아닙니다 (DOM2 급 이벤트는 IE9+ 에서 지원합니다. 즉, addEventListener 를 사용할 수 있는 곳이면 obj.handleEvent 도 사용할 수 있습니다). 가독성 측면입니다. 필자는 나름대로 많은 JS 관련 서적을 읽어왔다고 자부하지만, 이런 용법은 본 적이 없습니다. 따라서 써도 다른 사람이 이해할 수 있을지가 문제입니다

참고 자료

addEventListener 之 handleEvent: 원문이 404 가 되어 전재판을 붙입니다