이벤트 전파 ( 이벤트 버블링과 이벤트 캡처링 )

이벤트 객체는 이벤트를 발생시킨 DOM요소를 시작으로 DOM트리를 통해 전파된다. 

이때 이벤트가 하위에서 상위로 전파되는 것을 이벤트 버블링. 상위에서 하위 요소 방향으로 전파되는 것을 이벤트 캡처링이라고 한다. 

이벤트 버블링

 

우리는 이런 개념을 통해 공통된 이벤트를 각자 주는 것이 아닌 일종의 위임을 할 수 있는데, 이를 이벤트 위임(event delegation) 이라고 한다. 공통 조상에 하나의 핸들러로 여러 요소를 다룰 수 있는 것이다. 하지만 이것이 매번 필요한 것은 아닐것이다. 그럴 때는 방법이 있다. 

 

이벤트 전파를 막기 위해서는  e.stopPropagation()을 사용하면 된다. 

 

function logEvent(event) {
  event.stopPropagation();
}

이것을 통해 우리는 이벤트 버블링과 캡처링을 막을 수 있다.