Event

Event 인터페이스는 DOM 내에 위치한 이벤트를 나타냅니다.
이벤트 객체에는 이벤트에 대한 정보들과 이벤트를 조작하는 많은 메소드가 있습니다.

많은 DOM 요소는 이벤트를 받고, 받은 이벤트를 처리하는 코드를 실행할 수 있습니다.
이벤트 처리기는 대개 EventTarget.addEventListener()를 사용해 다양한 요소(<button>, <div>, <span>, 등등)에 사용하며 반대로 removeEventListener()로 제거할 수 있습니다.

Event Methods

대표적인 메소드로는 composedPath, preventDefault, stopPropagation, stopImmediatePropagation이 있습니다.

document.onclick = function(event) {
  event.preventDefault();
  event.stopPropagation();
  event.stopImmediatePropagation();
};

preventDefault

• 이벤트의 전파를 막지않고 그 이벤트를 취소합니다.
• 이벤트를 취소하는 도중에 preventDefault를 호출하게되면, 일반적으로는 브라우저의 구현에 의해 처리되는 기존의 액션이 동작하지 않게되고, 그 결과 이벤트가 발생하지 않게됩니다.
• 태그의 기본 동작(예를 들면, a 태그는 클릭 시 링크이동, form 태그은 폼 내용 전송)을 하지 않게 막아주는 역할을 합니다.

stopPropagation

• 태그를 클릭 시 부모에게 이벤트가 전달(버블링)되지 않도록 합니다. (이벤트캡처링,이벤트버블링 모두 취소한다)

stopImmediatePropagation

• 이벤트캡처링, 버블링을 막음과 동시에 같은 이벤트의 다른 리스너도 실행되지 않도록 합니다.
• event.stopImmediatePropagation()을 호출하면, 남아있는 리스너들이 불리는 일이 없습니다.

Reference

https://developer.mozilla.org/ko/docs/Web/API/Event
https://blog.sonim1.com/152