모달창 배경을 누르면 닫히는 기능

<div class="black-bg">
  <div class="white-bg">
    모달창 내용
  </div>
</div>

▲ 모달창 HTML은 대충 이런 식으로 코드가 짜여있고
모달창 오픈할 때 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번 했다고 인지합니다.

p랑 그 위의 div랑 그 위의 div랑 이렇게요.
이게 이벤트 버블링인데 브라우저는 원래 그렇게 동작하도록 되어있습니다.
이 사실을 모르고 코드짜다보면 가끔 이상한 현상이 발생할 수도 있습니다.

그래서 아까 "검은배경 누르면 모달창 닫아주세요~" 코드를 다시 살펴보면
왜 흰배경 눌러도 모달창이 닫히냐면 

<div class="black-bg"> // 이거 누르면 모달창 닫으라고 코드짰음
	 <div class="white-bg">
    모달창 내용
  </div>
</div>
유저가 <div class="white-bg"> 이거 클릭해도

이벤트 버블링 때문에 <div class="black-bg"> 이것도 클릭한 것입니다.

그래서 거기 붙어있던 이벤트리스너가 동작해서 모달창을 닫아주는겁니다.

이 문제를 해결할 때 자주 사용하는
이벤트관련 함수/메소드들을 살펴보도록 합시다.

이벤트리스너 안에서 쓰는 이벤트 함수들

document.querySelector('.black-bg').addEventListener('click', function(e){
  e.target;
  e.currentTarget;
  e.preventDefault();
  e.stopPropagation();
})

이벤트리스너의 콜백함수에 파라미터 아무거나 추가하면
이벤트관련 유용한 함수들을 사용가능합니다.
파라미터 이름은 아무렇게나 작명하면 됩니다. 보통 대충 e라고 함

e.target은 실제 클릭한 요소 알려줌 (이벤트 발생한 곳)
e.currentTarget은 지금 이벤트리스너가 달린 곳 알려줌 (참고로 this라고 써도 똑같음)
e.preventDefault() 실행하면 이벤트 기본 동작을 막아줌
e.stopPropagation() 실행하면 내 상위요소로의 이벤트 버블링을 중단해줌

몇개만 뽑아봤는데 필요할 때 가져다가 쓰면 됩니다.

여기서 중요한건 e.target인데
이벤트 버블링이 일어난다고 해도
사용자가 실제로 클릭한 그 요소는 저 문법으로 찾아낼 수 있다는걸 기억해둡시다.

그럼 모달창 닫기 버그를 해결해봅시다

document.querySelector('.black-bg').addEventListener('click', function(e){
  if ( e.target == document.querySelector('.black-bg') ) {
    document.querySelector('.black-bg').classList.remove('show-modal');
  }
})

둘 다 콘솔창에 출력해보고 == 비교해보는 버릇을 가지도록 합시다.

  • (참고)

저기서 e.currentTarget 출력해보면 검은배경이 나오기 때문에
e.target == e.currentTarget 이렇게 써도 될듯
아니면 e.target == this 이렇게 써도 될듯

  • (참고2)

jQuery 셀렉터로 찾은 결과와
querySelector 셀렉터로 찾은 결과는 다르게 생겼습니다.
출력해보면 전자는 이상한 object 이런게 나오고 후자는 <html> 이런게 나옵니다.

그래서 e.target == $('.black-bg') 이건 사용불가능합니다.
그리고 애초에 jQuery 셀렉터끼리 등호비교는 불가능합니다.

$('.black-bg').is($('.black-bg')) 이런 비교용 함수쓰든가 하면 됩니다.
위 예제에선 $(e.target).is($('.black-bg')) 이러면 됩니다.

그래서 오늘의 결론

  1. 이벤트 버블링은 항상 일어난다

  2. 이벤트 관련 유용한 함수들을 사용가능하다

참고 : 코딩애플

Typescript 컴파일시 세부설정 (tsconfig.json)
[백준] 1541번 잃어버린 괄호 / Java, Python

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage