[JS] 이벤트 버블링

🔎 이벤트 버블링

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

ex)
container 클릭시 모달창 닫는 코드 작성
but, modal 클릭 -> 이벤트 버블링 때문에 container도 클릭한 것으로 적용되어 모달창 닫김

<div class="container">
	<div class="modal">
     ...
    </div>
</div>

이를 해결하기 위한 이벤트 함수들이 있다

e.target	실제 클릭한 요소
e.currentTarget	이벤트 리스너가 달린 곳 (this로 작성 가능)
e.preventDefault()	이벤트 기본 동작 막기
e.stopPropagation()	이벤트 버블링 막기

• 이벤트 리스너의 콜백함수에 파라미터 추가 후 사용 가능

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

💡 주의

e.target 값을 제이쿼리와 비교하는 경우 같은 형태로 맞추어야 한다

$(e.target) == $('.container')  //같은 형태로 비교하거나
$(e.target).is($('.container')) //비교 함수 사용

이벤트 버블링을 이해하면 이벤트 리스너를 줄일 수 있고 램 용량을 절약 할 수 있음 !