모달창
로그인 버튼을 누르면 모달창이 나오게 되는 코드이다.
<button class="login">로그인</button>
<div class="black-bg">
<div class="white-bg">
<h4>로그인하세요</h4>
<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="password">
</div>
<button type="submit" class="btn btn-primary" id="send">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>모달창을 오픈할 때, ‘show-modal’ 클래스명을 넣어서 오픈했다면
let blackBg = document.querySelector('.black-bg');
blackBg.addEventListener('click', function() {
blackBg.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"> 을 클릭한 것으로 인식 되엉 모달창이 닫히게 된 것이다.
이벤트리스너 안에서 쓰는 이벤트 관련 함수
요소.addEventListener('click', function() {
e.target;
e.currentTarget;
e.preventDefault();
e.stopPropagation();
});[e.target](http://e.target) 은 클릭 이벤트가 일어난 요소를 알려준다. (이벤트가 발생한 곳)
e.currentTarget 은 이벤트리스너가 달린 곳을 알려준다. (this 라고 써도 똑같다.
e.preventDefault() 이벤트 기본 동작을 막아 준다.
e.stopPropagation() 내 상위요소로의 이벤트 버블링을 막아준다.
