0804_이벤트 버블링이란?

이벤트 버블링이란 ?

Event Bubbling

특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성

예를들어,

<form onclick="alert(form)">
	<div onclick="alert(div)">
		<p onclick="alert(p)">P</p>
	</div>
</form>

와 같은 구조에서 <p> 태그를 클릭하면 p->div->form 순서대로 3개의 경고창이 나타나게 됨.

프로젝트에서 목록의 제목이나 내용에 onClick 함수가 있는게 아닌 전체를 감싸주는 박스에 onClick 함수가 있을 경우 발생하게 됨.

preventDefault

자바스크립트를 사용해 이벤트가 기본적으로 수행하는 동작을 막을 때 사용되는 함수. 이 함수를 이용하면 이벤트가 발생했을때 브라우저가 기본적으로 수행하는 행동을 방지 할 수 있음.

예를들어, <a> 태그를 클릭하면 브라우저는 해당 링크로 이동함. 하지만 preventDefault 를 이용하면 이 기본 동작을 막을 수 있음.

const JS_삭제하기기능 = (event, 삭제할거) =>{
  event.preventDefault() // 이게 없다면, 버튼을 감싸고있는 <a> 태그도 실행됨
}

<a href="./01-event-bubbling2-prevent-default-detail.html">
	<div class="CSS_이미지사진">
		<button onclick="JS_삭제하기기능(event, 1)">1번 삭제</button>
	</div>
</a>

preventDefault를 사용하지 않는 경우

1. 버튼클릭 이벤트 발생
2. JS_삭제하기기능() 함수 실행
3. 태그 실행

preventDefault를 사용한 경우

1. 버튼클릭 이벤트 발생
2. JS_삭제하기기능() 함수 실행
3. 태그 실행 X

불필요한 이벤트 발생을 위해서 사용됨.

stopPropagation

이벤트가 부모 요소로 전파되는것을 막는 함수. 이벤트 버블링을 중단시키는데 사용됨

preventDefault vs stopPropagation

• preventDefault:
  • 브라우저가 이벤트에 대해 수행하는 기본 동작을 막습니다.
• 링크 클릭 시 페이지 이동, 폼 제출 시 페이지 리로드 등.
• stopPropagation:
  • 이벤트가 상위 요소로 전파되는 것을 막습니다.
  • 예: 자식 요소의 클릭 이벤트가 부모 요소로 전파되는 것을 방지.