이벤트 버블링

어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다.
click이라는 이벤트로 예를 들어보면,
HTML 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭된다는 말이다.

document.querySelector('.black-bg').addEventListener('click', function(e){
  e.target;
  e.currentTarget;
  e.preventDefault();
  e.stopPropagation();
})

e.target : 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)

e.currentTarget : 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)

e.preventDefault() : 실행하면 이벤트 기본 동작을 막아줌

e.stopPropagation() : 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌

 

여기서 중요한건 e.target인데 
이벤트 버블링이 일어난다고 해도
사용자가 실제로 클릭한 그 요소는 저 문법으로 찾아낼 수 있다는걸 기억해두자.