버블링과 캡쳐링 둘다 다룰 생각이었으나 캡쳐링은 많이 사용되지않는다고 해서 개념만 이해하고 버블링에 대해서 쓰기로 한다.
✍ 버블링이란?
element에 이벤트가 발생하면, 이 element에 할당된 핸들러가 동작하고, 이어서 부모 element의 핸들러가 동작한다. 가장 최상단의 조상 element를 만날 때까지 이 과정이 반복되면서 element 각각에 할당된 핸들러가 동작한다.
간단한 예시로 아래 코드의 제일 안쪽 element를 눌러도
부모의 event까지 모두 실행되는 것을 알 수 있다.
위와같은 흐름을 '이벤트 버블링’이라고 부른다. 버블링과 캡쳐링이 헷갈린다면 버블은 버블이기때문에 공중으로 숑숑 날아간다고 생각하자(?
버블링의 개념을 이해했다면 이제 우리가 알아야 할것은 event.target과 event.currentTarget이다.
✍ event.target과 event.currentTarget
이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다.
event.target과 this(=event.currentTarget)는 다음과 같은 차이점이 있다.
event.target은 실제 이벤트가 시작된 ‘타깃’ 요소입니다. 버블링이 진행되어도 변하지 않는다.
this는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조한다.
🌱step by step