이벤트 버블링이란?

이벤트 버블링은 DOM 요소에서 이벤트가 발생하면, 그 이벤트가 해당 요소에서 시작해서 부모 요소로, 그리고 또 그 위의 부모 요소로 이렇게 전파되는 과정을 말합니다.
자식 요소에서의 버튼을 클릭하면, 거기서 시작된 클릭 이벤트가 부모 요소로 전파되는 것입니다.

이벤트 버블링을 방지하자

이벤트 버블링을 방지하는 일반적인 방법은 stopPropagation() 메서드를 사용하는 것입니다. 이 메서드를 사용하면 이벤트가 부모 요소로 전파되지 않습니다.

• 예제 코드

const EventBubbling = () => {
  const outerClick = () => {
    console.log('부모 요소 클릭');
  }
  
  const innerClick = () => {
    console.log('자식 요소 클릭');
    event.stopPropagation(); // 이벤트 전파 방지
  }
  
  return (
    <div 
		onClick={outerClick} 
		style={{ backgroundColor: '#d0d0d0', padding: '20px'>
    		<button onClick={innerClick}>안쪽 버튼</button>
    </div>
	);
};

이 코드에서 버튼을 클릭했을 때 '자식 요소 클릭'만 console에 나타납니다. 이는 stopPropagation() 메서드가 이벤트가 부모 요소로 전파되는 것을 막았기 때문입니다.

DOM이 뭔데

DOM(Document Object Model)은 웹 페이지의 구조화된 표현으로, HTML 또는 XML 문서를 객체로 표현하여 프로그래밍 언어가 문서의 구조, 스타일, 내용 등을 동적으로 접근하고 수정할 수 있게 해줍니다.

• DOM의 특징

1. 트리 구조

• DOM은 문서를 트리 형태로 표현합니다. 몬서의 요소, 속성, 텍스트 등을 나타냅니다.

2. 동적 수정

• JS를 사용해 DOM을 수정할 수 있습니다. 이를 통해 웹 페이지의 내용이나 스타일을 동적으로 변경할 수 있습니다.

3. 이벤트 처리

• DOM을 통해 사용자 입력이나 다른 이벤트를 처리할 수 있습니다.