이벤트버블링 쪽에서 질문있습니다

[병아리짹짹]

제가 모달창을 만들었는 부분이 있는데 예전에 모달창 2개 만들려다가 2개가 안되서 구글링해서 만들었는데 밖 부분을 누르면 기능을 만드는 것에서 되는 것이 있고 안 되는 것이 있어서 그 차이가 궁금합니다

일단 아래는 모달창 만든 코드입니다

<!-- 첫 번째 Modal을 여는 클래스 -->
<button class="view_more">점수확인</button>
 
<!-- 첫 번째 Modal -->
<div class="modal">

  <!-- 첫 번째 Modal의 내용 -->
  <div class="modal-content">                     
    <div class="my-3">
     <input type="number" id="min" />
   </div>
   <div class="my-3">
     <input type="number" id="hung" />
   </div>
   <div id="sc">점수는 100점 이하입니다</div>
   <button type="submit" class="btn btn-primary" id="cc">확인</button>
   <button type="button" class="btn btn-danger" id="close2">닫기</button>
 </form>
 
 <span class="close">&times;</span>    
  </div>
</div>

<hr>
<!-- 두 번째 Modal을 여는 클래스 -->
<button class="view_more">로그인</button>

<!-- 두 번째 Modal -->
<div class="modal">

  <!-- 두 번째 Modal의 내용 -->
  <div class="modal-content">
   <form action="success.html">
     <div class="my-3">
       <input type="text" class="form-control" id="email" />
     </div>
     <div class="my-3">
       <input type="password" class="form-control" id="pw" />
     </div>
     <div id="cf">비번은 6자 이상입니다</div>
     <button type="submit" class="btn btn-primary" id="check">전송</button>
     <button type="button" class="btn btn-danger" id="cls">닫기</button>
   </form>
   <span class="close">&times;</span>
    
  </div>
</div>

-----------------------------
그리고 아래는 잘 작동되는 코드입니다

window.onclick = function(event) {
  if (event.target.className == "modal") {
      event.target.style.display = "none";
  }
};

-----------------------------
그리고 이것은 첫번째 모달창에서만 밖 누를 때 닫기가 되는데 두번째 모달창은 적용이 안되는 코드입니다

document.querySelector(".modal").addEventListener("click", function(e){
  if(e.target.className =="modal"){
    e.target.style.display = "none";
    document.querySelector(".modal").style.display="none"
}});


------------------------------
이런식으로 질문해도 되나 모르겠는데 위 2개의 코드의 차이와 아래쪽이 왜 안되는지 알고 싶습니다

[codingapple]

document.querySelector(".modal") 은 .modal 가진것 중 맨 위에거 하나만 찾아줘서 밑에건 못찾아줍니다 querySelectorAll 씁시다

[글쓴이]

글