이벤트 버블링&이벤트 관련 함수

이벤트 버블링이란?

=이벤트가 상위 html로 퍼지는 현상

<div class="black-bg">
   <div class="white-bg"> 
			<h4>로그인하세요</h4>
   </div>
</div>

h4태그를 클릭하면 white-bg라는 div와 black-bg라는 div도 클릭이 되었다고 컴퓨터는 인식합니다. 그래서 총 3번의 클릭이 되었다고 인식하죠. 이게 이벤트 버블링입니다.

유용한 이벤트 관련 함수

$(".black-bg").on("click", function (e) {
  $(".black-bg").removeClass("show-modal");
}); 

콜백함수에 파라미터 'e'를 작명하면 쓸 수 있는 함수가 있습니다.
1. e.target : 유저가 실제로 누른 요소를 알려줍니다.
2. e.currentTarget : 이벤트 리스너가 달려있는 요소를 알려줍니다.
3. e.preventDefault() : 이벤트의 기본동작을 막아줍니다.
4. e.stopPropagation() : 상위 요소로 퍼지는 이벤트 버블링을 중단해줍니다.

Q. 이벤트 버블링을 이해하고 있으면 어디에 써먹어요?
A. 이벤트 버블링을 이해하면 코드를 축약해줄 수 있습니다.

<ul class="list">
 <li class="tab-button">Products</li>
 <li class="tab-button orange">Information</li>
 <li class="tab-button">Shipping</li>
</ul>

이벤트 버블링을 배우기 전에는 각각의 tab-button마다 이벤트 리스너를 적용시켰었습니다.
이벤트 버블링을 배우면 list에게만 이벤트 리스너를 적용시키면 된다는 점이 장점입니다.
그러면 코드는 단축될 뿐만 아니라 RAM용량 측면에서도 이점을 가져다줍니다.

<결론>
이벤트 버블링을 알고있으면 이벤트 리스너를 적게 사용할 수 있다~

출처. 코딩애플