이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미합니다. 이 부분은 캡틴판교님께서 잘 정리해주셔서 링크로 올립니다.
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
브라우저에서 동작하는 걸 실제로 보이는 곳이 html입니다.
간혹 html에 script를 위에다 작성하는 경우가 있는데 그렇게한다면 HTML을 위에서 아래로 하나하나 읽을 때 먼저 스크립트가 읽혀버리니까 documnet 그려지지 않는 상황에서 진행되기 때문에 안됩니다. 이를 방지하기 위해서는 맨 아래에 스크립트를 작성하거나 위에 작성시 defer를 작성하면 됩니다.