[Javascript] 브라우저 기본동작과 이벤트 동작의 차이점 및 이벤트 버블링 방지 방법

브라우저 기본 동작 vs 이벤트 동작

1️⃣ 브라우저 기본 동작

• HTML 태그와 브라우저가 제공하는 고유 기능.
• 예: <a> 클릭 시 페이지 이동, <form> 제출 시 새로고침, 스크롤 등.
• 자동 실행: JavaScript 코드 없이도 동작.
• 중단 방법: event.preventDefault().

2️⃣ 이벤트 동작

• JavaScript로 addEventListener 또는 React의 onClick 등으로 등록한 사용자 정의 동작.
• 예: 클릭 시 알림 표시, 키보드 입력 감지.
• 수동 실행: 프로그래머가 리스너를 추가해야 동작.

 

이벤트 버블링 정의

**이벤트 버블링(Event Bubbling)**은 DOM 요소에서 발생한 이벤트가 타깃 요소에서 시작해 부모 요소로 전파되는 동작입니다.

• 이벤트는 타깃 요소 → 부모 → 조부모 순으로 상위 요소로 전파됩니다.
• 기본 동작: 자식 요소에서 발생한 이벤트가 부모 요소에도 영향을 미칠 수 있음.

예:

<div class="parent">
  <button class="child">Click Me</button>
</div>

document.querySelector('.parent').addEventListener('click', () => console.log('Parent clicked'));
document.querySelector('.child').addEventListener('click', () => console.log('Child clicked'));

 

이벤트 버블링 방지 방법

1. event.stopPropagation()
   • 이벤트가 상위 요소로 전파되지 않도록 차단.
   • 버블링 단계에서만 유효.
2. event.stopImmediatePropagation()
   • 같은 요소에 등록된 다른 이벤트 핸들러도 실행되지 않도록 차단.
3. CSS로 클릭 차단
   • pointer-events: none; 사용해 클릭 이벤트 자체를 비활성화.