Event Bubbling

각 image마다 li 태그로 되어있는 상태

>> 각 이미지를 클릭할 때 마다, 발생하는 event를 처리하고 싶다면?

for문으로 각각의 li Node들을 선택하고 addEventListener를 추가해주면 됨

>> li가 계속 늘어나서 10개 100개가 된다면, 모든 li에 이벤트 리스너를 추가하는 것은 비효율적

ul > li > img로 포함되어 있음

img를 클릭해도 ul에 있는 이벤트리스너가 작동함

(각각의 Node에 이벤트리스너를 추가할 필요가 없어졌음)

이와 같은 동작을 Event Bubbling이라고 함

(클릭한 지점이 하위엘리먼트라고 하여도,
그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트리스너가 있는지 찾는 과정)

출처 : https://www.grapecity.com/en/blogs/html-and-wijmo-events/

실행순서는 3 > 2 > 1로 각각의 이벤트 리스너가 모두 발생함

(Capturing은 1 > 2 > 3으로 동작)

ul 영역 내의 img를 선택하면(tagName은 대문자로 나온다) 이벤트의 target 정보에 있는 src 정보를 알 수 있음

(li를 따로 확인하는 이유는 img와 ul 사이의 padding 영역이 li의 영역이어서 그 부분도 처리하는 것)

(firstChild로 확인하면 공백을 문자(text)로 인식하여 src 정보를 가져오지 못할 수 있으므로,
firstElementChild로 확인하는 것이 정확!)

https://www.edwith.org/boostcourse-web/lecture/16760/