[JS] 까먹은 이벤트 버블링과 이벤트 함수들

이벤트 버블링

어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상

---

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

이벤트 버블링 막거나

이벤트가 이상하게 동작하는걸 막을 수 있다

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

이벤트리스너의 콜백함수에 파라미터 아무거나 추가하면 

이벤트관련 유용한 함수들을 사용가능

e.target

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

- 유저가 실제로 누른거 그 클릭한 요소를 알려 줌.

e.currentTarget

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

e.preventDefault() 

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

e.stopPropagation() 

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