#30 자바스크립트 - 이벤트 전파(Event Propagation)를 제어하여 중첩된 이벤트 문제 해결하기 <"버블링" & "캡처링">

오늘은 자바스크립트에서 중첩된 이벤트로 인한 문제에 봉착하여 이를 해결하는 과정에서 알게 된 이벤트 전파(Event Propagation) 흐름에 대해서 이야기해보려고 한다. 중첩된 HTML 요소에서 이벤트가 중첩되어 있을 때, 이벤트 전파 흐름을 제대로 알고 제어할 수 있어야 한다. 0.

이벤트 전파(Event Propagation)란 ? 우리의 웹사이트에서는 HTML 요소가 중첩되어 계층적으로 이루어져 있다.

이러한 계층적 구조 특징 때문에 만일 HTML 요소에 이벤트가 발생할 경우 연쇄적 이벤트 흐름이 일어나게 된다. 이를 이해하기 위해 아주 간단하게 SNS 게시물(post)을 하나 만들어서, "게시물 자체"를 클릭하면 => "상세(detail) 페이지"로 가도록 하고, "프로필 페이지로 가기"를 클릭하면 => "프로필(profile) 페이지"로 가도록 만들어보자. // HTML 코드(body 안에만) // post div...