addEventListener 의 전통적인 명세는 아래와 같다.
[code]
addEventListener(string 이벤트명, func 콜백함수 [, bool 캡쳐링 or 버블링])
[/code]
세번째 인자를 true 로 주면 캡쳐링이 되고 false 로 주면 버블링이 된다. 캡쳐링이란 최상단부모 엘리먼트로부터 순차적으로 타겟까지 이벤트를 발생시킨다. 버블링이란 반대로 타겟부터 최상단부모까지 이벤트를 발생시킨다. 기본값은 false 이다.
참고로 콜백함수에서 event.stopPropagation() 이나 event.cancelBubble=true 를 주게되면 버블링을 막는다.
Chrome 51, Firefox 49, Safari 10 부터 3번째 인자를 boolean 형식 뿐만 아니라 아래와 같이 객체로 세팅할 수가 있게 되었다.
[code]
{
capture: false,
once: false,
passive: false
}
[/code]
capture
위의 전통적 옵션과 같은 기능이다.
once
이벤트를 한번만 발생시키고 해제한다. 1회성 이벤트로 사용할 수 있다.
passive
브라우저의 렌더링 시스템은 메인스레드(Main Thread)와 컴포지트스레드(Composite Thread)가 있는데 일반적으로 컴포지트스레드가 이벤트를 메인스레드로 던지고 난뒤에 메인스레드에서 처리 후 컴포지트스레드가 실행된다. 컴포지트스레드는 메인스레드가 처리를 완료할때까지 기다리게 된다.
passive 를 true 로 설정하면 컴포지트스레드가 이벤트를 메인스레드로 던지긴 하는데 처리가 완료될때까지 기다리지 않고 바로 다음동작을 수행한다. 그래서 스크롤관련이벤트에서 true 로 설정하게 되면 성능이 향상된다.
