브라우저에게 이벤트란?

브라우저가 이벤트를 감지하는 방법은 2가지로 나눌 수 있습니다.

1. 이벤트 버블링(Event Bubbling)

어떤 특정 요소에서 이벤트가 발생했을 경우 상위 요소로 이벤트를 전파하는 방식(단, 상위 요소가 같은 이벤트 핸들러를 가지고 있다는 가정)

2. 이벤트 캡처링

위의 이벤트 버블링과 반대되는 방식으로 어떤 특정 요소에서 이벤트가 발생했을 경우 최상위 요소(body)부터 해당 요소로 내려가는 방식

위의 2가지 방식으로 이벤트가 발생하기 때문에 개발자는 원리를 숙지하고 있어야 예상치 못한 동작이 발생했을 경우 추론하여 해결 할 수 있습니다.

그럼 기본 동작을 개발자가 조작 하기 위해서는 어떻게 해야 할까요?

이벤트 조작 방법 3가지

event.preventDefault()

현재 이벤트의 기본 동작을 중단(예: 브라우저 마우스 우클릭 시 컨텍스트 메뉴)

event.stopPropagation()

상위 DOM으로 전파되지 않도록 중단

event.stopImmediatePropagation()

현재 및 상위 DOM으로 전파되지 않도록 중단

위 3가지만 확실히 알면 이벤트를 조작할 때 좀 더 편-안하게 할 수 있습니다.