JavaScript 이벤트버블링

1. 이벤트 버블링 이란?

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

예시)

<div>
  <div>
    <p>안녕</p>
  </div>
</div>

• 위의 코드에서 p태그 안녕을 클릭하면, 브라우저는 사용자가 클릭을 3번했다고 인지함

---

2. 이벤트리스너 안에서 쓰는 이벤트 함수들

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

• e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)
• e.currentTarget은 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)
• e.preventDefault() 실행하면 이벤트 기본 동작을 막아줌
• e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌
• 여기서 중요한건 e.target인데 이벤트 버블링이 일어난다고 해도 사용자가 실제로 클릭한 그 요소는 저 문법으로 찾아낼 수 있다는걸 기억해둡시다.

---

3. 결론

• 1. 이벤트 버블링은 항상 일어난다
• 2. 이벤트 관련 유용한 함수들을 사용가능하다