event.stopPropagation

* propagation : 번식
* prevent : 막다 

document에서 한 버튼을 click한 경우 우리 눈에는 보이지 않지만, 그 버튼의 부모태그, 그 부모태그의 부모태그 .... 결국엔 최상의 document DOM 까지 클릭이벤트가 전파된다. (Event Bubbling) 이것을 방지하는 것. 

*Event Capturing : Bubbling과 반대로 상위노드부터 하위노드까지 전파되는 현상 

*Event Phase : 현재 이벤트 흐름의 단계를 나타냄 

<div>
	<p>
    	<a href="">클릭</a>
    </p>
</div>

<script>
	const $a = document.querySelector('a');
    const $p = document.querySelector('p');
    const $div = document.querySelector('div');
    
    $a.addEventListener('click', function(event){
    	console.log($a + "click" + event.eventPhase);
    }, false);
    
    $p.addEventListener('click', function(event){
    	console.log($p + "click" + event.eventPhase);
    }, false);
    
    $div.addEventLisetner('click', function(event){
    	console.log($div + "click" + event.eventPhase);
    }, false);
 </script>

- Target 이벤트에서 캡쳐링 될때는 1
- Target 이벤트까지 도착했을 때는 2
- Tartget 이벤트에서 부모노드로 올라갈 때는 3

- event.stopPropagation : 상위 DOM으로 이벤트 전파 방지 (이벤트 버블링 막기)
- event.stopImmediatePropagation : 상위 DOM 뿐 아니라, 같은 레벨의 이벤트도 전파 방지 
- event.preventDefault : 예를들어 a태그의 기본동작(사이트이동)을 중단함 
  jquery에서 return false는  event.stopPropagation, event.preventDefault를 모두 수행한 것과 같은 결과를 보인다. 
  jquery를 사용하지 않는다면 return false의 의미는  event.preventDefault.

 

ex) 모달창 배경 눌렀을 때 닫기 예제 

var backClose = document.getElementById('모달'); //모달 
        
backClose.addEventListener('click', function(e){ //모달 태그의 내부 요소를 클릭하면 
console.log(e.target);
    e.stopPropagation();  //모달 레이어 내의 다른 요소들 클릭 시, 상위DOM으로(모달창 배경) 클릭이벤트가 전파되는 것을 방지
            
    if( e.target == backClose) { //클릭한 타겟이 모달창의 배경일 경우 
    	backClose.style.display = 'none';  // 모달창을 닫음 
    }
});