[javascript] 15. 이벤트 버블링

지렁·2023년 9월 24일

이전 포스팅에서 구현한 모달창이다

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

            <form action="success.html">
                <div class="my-3">
                    <input type="text" id= "email" class="form-control">
                </div>
                <div class="my-3">
                    <input type="password" id="pw" class="form-control">
                    <p class="textholder">6자리 이상 입력하세요</p>
                </div>
                <button type="submit" id="submit" class="btn btn-primary">전송</button>
                <button type="button" class="btn btn-danger" id="close">닫기</button>
            </form> 
        </div> 
    </div>

검은 배경을 클릭하면 로그인 모달창이 사라지도록 하기

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

show-modal 클래스를 탈부착하는 식으로 구현을 했었으니 이번에도 일관성 있게 show-modal 클래스를 제거하는 방식으로 구현

⚠️ 문제발생 ⚠️

검은 배경을 클릭했을 때 사라져야 하는데 흰 배경을 클릭해도 모달창이 사라진다 ...?

➡️ 이벤트 버블링 때문

모든 브라우저는 이벤트가 상위 html로 퍼지는 현상 인 버블링 이 일어남

그렇기 때문에

<div class="black-bg">
        <div class="white-bg">

white-bg를 클릭해도 black-bg를 클릭한 거로 인식됨

[ 유용한 이벤트 관련 함수들 ]

이벤트 콜백함수에 e라는 파라미터를 입력하면 사용 가능

e.target 🟰 유저가 실제로 누른 html 요소
e.currentTarget (= this) 🟰 이벤트리스너가 달린 곳
e.preventDefault 🟰 이벤트 기본 동작 (ex) 폼 전송) 막아줌
e.stopPropagation 🟰 상위요소로 이벤트 버블링 막기

📢 해결방법

" 내가 실제로 클릭한게 검은 배경이면 모달창 닫아주세요 " 라는 조건문 작성

1. 자바스크립트로

<script>
$('.black-bg').on('click',function(e){
    if(e.target==document.querySelector('.black-bg'){
        $('.black-bg').removeClass('show-modal')
    }
})
</script>

2. jQuery로 조건문 작성

똑같이 jQuery를 사용하여 비교

<script>
$('.black-bg').on('click',function(e){
	if($(e.target)==$('.black-bg')){
     $('.black-bg').removeClass('show-modal')
    }
})
</script>

or

<script>
$('.black-bg').on('click',function(e){
	if($(e.target).is($('.black-bg'))){
     $('.black-bg').removeClass('show-modal')
    }
})
</script>

3. this 사용

<script>
$('.black-bg').on('click',function(e){
    if(e.target == this){
        $('.black-bg').removeClass('show-modal')
    }
})
</script>

4. 추가

아래처럼 해도 잘 작동한다

<script>
$('.black-bg').on('click',function(e){
    if(e.target==$('.black-bg')[0]){
        $('.black-bg').removeClass('show-modal')
    }
})
</script>