이벤트버블링, 이벤트함수

이벤트버블링이란 이벤트가 발생하면 해당 요소의 상위요소까지 이벤트가 모두 실행되는 현상을 뜻한다.

예를 들면,

<div class="black-background">
  <div class="white-background">
    모달창 내용
  </div>
</div>

이런 검정색 배경안에 흰색 배경이 있고, 그 안에 모달창 내용이 있을 때, 검정색 배경을 누르면 모달창이 꺼지게 코드를 짰다.

$('.black-background').click(function(){
  $('.black-background').hide()
});

하지만 실행해보면 흰색배경을 눌러도 모달창 내용을 눌러도 다 닫히는 버그가 생긴다. 이런걸 이벤트 버블링때문에 생기는 현상이라고 한다. 이유는 흰색배경을 눌러도 상위요소인 검정배경까지 눌리기 때문이다. 

 

먼저, 이벤트 함수에 대해 알고 해결해보자.

  e.target;
  //실제 클릭한 요소
  e.currentTarget;
  //지금 eventListener가 달린 곳 $(this) 와 같음 
  e.preventDefault();
  //기본 동작을 막을 때 사용
  e.stopPropagation();
  //상위요소로의 이벤트 버블링을 중단할 때
  
  //이벤트함수는 function(e) { 이 안에 }써야 사용가능

이벤트 함수를 이용하면 이벤트 버블링은 해결할 수 있다.

$('.black-background').on('click', function(e) {
	if ( e.target == e.currentTarget ){
    	$('.black-background').hide()
  	}
});

//e.currnetTarget 대신 document.getElementByClass('black-background')도 가능
//하지만 $('.black-background')은 제이쿼리 문법이고 e.target은 자바스크립트 문법이라 불가능