[자바스크립트] 이벤트 버블

\\

이런 모달창이 있다.

검은색 배경을 클릭하면 모달창이 꺼지도록 하고싶어서 자바스크립트를 작성했다.

<script>
	$('.black-bg').on('click',function(){
    	$('.black-bg').removeClass('show');
        });
</script>

이렇게 작성했다.

 

그런데 잘 작동될까?

이 black-bg 위에 하얀색 모달 창이 얹혀있는 상태이기 때문에,

하얀색 모달창 부분을 클릭해도 이벤트가 발생하게 된다.

 

어떠한 요소의 이벤트가 발생하면 해당 요소의 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다.

 

        $('~~~').on('click',function(e){
            
            e.target;//유저가 실제로 누른거
            e.currentTarget; // this
            e.preventDefault(); //이벤트 기본동작을 막음 submit 등
            e.stopPropagation();//내 상위 요소로의 이벤트 버블링을 막음
        })

이벤트리스너의 콜백함수에 파라미터를 추가하면 이벤트 함수를 사용할 수 있는데

이런 함수들을 이용하면 이벤트 버블링을 막을 수 있다.

 

e.target은 유저가 실제로 누른 요소를 알려주는데,

e.target의 값과 내가 의도한 요소(아까전 모달창 예시에서는 검은 배경부분)를 비교해서 판단할 수도 있겠다.

        $('.black-bg').on('click', function(e) {
            if (e.target == this) {
                $('.black-bg').removeClass('show');
            }
        })