모달창 배경을 누르면 닫히는 기능 추가하기
모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해보아요
모달창 HTML
<div class="black-bg">
<div class="white-bg">
모달창 내용
</div>
</div>모달창을 오픈할 때 show-modal 클래스 명을 넣어서 오픈했기 때문에
document.querySelector('.black-bg').addEventListener('click', function(){
document.querySelector('.black-bg').classList.remove('show-modal');
})이렇게 짜주면 검은 배경을 눌렀을 때 모달창이 잘 닫힌다
근데! 검은배경 뿐만 아니라 흰 배경이나 input, 글자 등 어떤걸 눌러도 다 닫힌다
이벤트버블링
어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상을 이벤트 버블링이라고 한다.
click이라는 예시를 보면 HTML 태그에 클릭이 발생하면 그의 모든 상위요소까지 자동으로 클릭!
<div>
<div>
<p>안녕</p>
</div>
</div>-> p 태그 안녕이라는 글자를 클릭하면 브라우저는 사용자가 클릭을 총 3번했다고 인지
따라서 아까 모달 창도 다른곳을 누르면 상위요소에 클릭!클릭!이 전달되어 아무곳이나 눌러도 다 닫혔던 것
이 문제를 해결할 때 자주 사용하는 이벤트관련 함수/메소드 들 알아보기
이벤트리스너 안에서 쓰는 이벤트함수들
<script>
document.querySelector('.black-bg')
.addEventListener('click', function(e){
e.target; // 실제 클릭한 요소 알려줌(이벤트 발생한 곳)
e.currentTarget; // 지금 이벤트리스너가 달린 곳 알려줌 (=this)
e.preventDefault(); // 이벤트 기본 동작을 막아줌
e.stopPropagation(); // 상위요소로의 이벤트 버블링 중단
})
</script>이벤트 버블링이 일어난다고 해도 사용자가 실제로 클릭한 그 요소는
e.target으로 찾아낼 수 있다.
모달창 닫기 버그 해결하기
항상 한글로 먼저 짜면 JS로 번역하기 쉬워용
<script>
document.querySelector('.black-bg').addEventListener('click', function(e){
if (지금 실제로 클릭한거 == 검은 배경) {
document.querySelector('.black-bg').classList.remove('show-modal');
}
})
</script>지금 실제로 클릭한거 -> e.target
검은배경 -> document.querySelector('.black-bg')
같은지 안같은지 확인하는 방법은 console.log로 항상 확인하기
<script>
document.querySelector('.black-bg').addEventListener('click', function(e){
if ( e.target == document.querySelector('.black-bg') ) {
document.querySelector('.black-bg').classList.remove('show-modal');
}
})
</script>-> 작동 완료!
내가 안됐던 이유...
console.log(e.target);
console.log($(".black-bg"));
안되는 이유는 document.querySelector()의 콘솔창과 $()의 콘솔창이 다르기 때문
그래서 요렇게 맞춰주면
console.log(e.target);
console.log(document.querySelector(".black-bg"));
일치해용
jQuery셀렉터로 찾은 결과와 querySelector 셀렉터로 찾은 결과는 다르게 생겼다
그래서!!! 내가 사용한 e.target == $('.black-bg') 이것은 사용 불가하다.
그리고 애초에 jQuery셀렉터끼리는 비교가 불가능하다고 한다..
