이벤트 전파 버블링 ,막기

이벤트 버블링이란

한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날 때까지 핸들러가 동작되는걸 말함

모달창의 검은색 바탕을 누르면 모달창이 사라지게하는 코드인데,
이벤트 버블링때문에 모달창의 어느부분을 눌러도 모달창이 사라진다.

<script>
     document.querySelector('.black-bg').addEventListener('click',function(e){
              document.querySelector('.black-bg,.white-bg').style.display='none';
     });
</script>

e.target //이벤트가 발생한 요소를 반환해준다
if(e.target == document.querySelector('.black-bg'))로
이벤트가 발생한 요소와 이벤트 리스너를 준 대상을 비교한 조건으로 실행한다

<script>
     document.querySelector('.black-bg').addEventListener('click',function(e){
            if(e.target == document.querySelector('.black-bg')){
                document.querySelector('.black-bg,.white-bg').style.display='none';
            }
     });
</script>