addEventListener 의 Option > IT 기술백서

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 로 설정하게 되면 성능이 향상된다.