이번엔 이벤트 버블링을 배워볼껀데
우선 js012.html 파일을 만들고 js010.html의 일부만 가져옵니다.
(캐러셀 return 스크롤이벤트 부분 제외)
Copy <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<div class="black-bg1">
<div class="white-bg">
<h4>로그인하세요</h4>
<form >
<div class="mb-3">
<input type="text" class="form-control" id="email">
<!--<input type="email" class="form-control" id="email1">-->
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password">
</div>
<button type="submit" id="submit" class="btn btn-primary">Submit</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<span class="badge bg-dark ms-auto mx-3">Dark 🌛</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon "></span>
</button>
</div>
</nav>
<ul class="list-group" id="list1">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
<button id="loginBtn" type="button" class="btn btn-primary">
버튼
</button>
<script>
$('#loginBtn').on('click', function(){
$('.black-bg1').addClass('show-modal1');
});
$('#close').on('click', function() {
$('.black-bg1').removeClass('show-modal1');
})
$('.navbar-toggler').on('click', function() {
$('.list-group').toggleClass('lg-open');
});
$('form').on('submit', function (e){
console.log(document.getElementById('email').value);
if($('#email').val() === ''){
alert('아이디를 입력하세요');
e.preventDefault(); // 폼 전송 막는 코드
}
var regExp = /^([\w\.\_\-])*[a-zA-Z0-9]+([\w\.\_\-])*([a-zA-Z0-9])+([\w\.\_\-])+@([a-zA-Z0-9]+\.)+[a-zA-Z0-9]{2,8}$/i;
if(!regExp.test($('#email').val())){
alert("이메일 형식을 확인하세요");
e.preventDefault();
}
if($('#password').val() == ''){
alert('패스워드를 입력하세요');
}else if($('#password').val().length <4){
alert('패스워드는 4자 이상이어야 합니다.');
}
});
</script>
</body>
</html>
회색 부분을 클릭 했을 때 모달이 닫히는 걸 만들어보자.
Copy $('.black-bg1').on('click' , function (){
$('.black-bg1').removeClass('show-modal1');
}); 이렇게 하면 배경 클릭 시 잘 닫힌다.
🔥 이렇게 하면 버그가 있다. input box나 흰배경을 클릭 해도 닫힌다.
💎이벤트 관련 함수
Copy e.target(); //유저가 실제로 누른거
e.currentTarget(); //이벤트 리스너 달린 곳 $('.black-bg1') 나올듯
console.log(this);
e.preventDefault(); //이벤트 기본동작 막아줌 10번파일에서 잠깐 보고 넘어감
e.stopPropagation(); //내 상위요소로 이벤트 버블링 막아줌
Copy $('.black-bg1').on('click' , function (e){
//1. jQuery
if($(e.target).is($('.black-bg1'))){
$('.black-bg1').removeClass('show-modal1');
}
//2. querySelect
if($(e.target) == document.querySelector('.black-bg1')){
$('.black-bg1').removeClass('show-modal1');
}
});
지난번에 만들었던 탭기능 js011.html 로 돌아와서
Copy for (let i = 0; i< tabBtn.length; i++){
tabBtn.eq(i).on('click', function (){
tabBtn.removeClass('orange');
tabContent.removeClass('show');
tabBtn.eq(i).addClass('orange');
tabContent.eq(i).addClass('show');
})
} 위의 코드는 이벤트 리스너를 3번 반복해서 생성한다.
이걸 다시 줄여보자.
Copy for (let i = 0; i< tabBtn.length; i++){
tabBtn.eq(i).on('click', function (){
tabOpen(i);
})
}
function tabOpen(num){
tabBtn.removeClass('orange');
tabContent.removeClass('show');
tabBtn.eq(num).addClass('orange');
tabContent.eq(num).addClass('show');
} 이렇게 변경 할 수 있다.
이처럼 코드 결과의 변경 없이 구조를 바꾸는 걸 리팩토링이라고 한다.
이렇게 하는 이유는
가독성이 좋다 = 다른사람이 코드를 봐도 이해, 수정이 편하다.
이벤트 버블링에 대해서 알면 이벤트 리스너도 줄일 수 있다.
탭을 만들면서 이벤트 리스너를 3개를 만들었는데
이벤트 버블링을 배우고 나니 하나로도 가능할 것 같다.
버튼의 부모인 ul 에 하나의 이벤트 리스너만 있어도 탭기능을 완성할 수 있다.
이렇게 하는 이유는
버튼이 3개에서 더 늘어난다면 추가도 쉽고 코드도 덜 복잡하다.
이벤트리스너는 램을 차지한다 즉 이벤트리스너를 줄이면 성능도 개선된다.
✨ 과제. 방금 작성한 tapOpen 함수를 사용해서 ul $('list') 에 이벤트 리스너를 만들어보자.
기존의 이벤트 리스너는 주석처리!
밑에 코드 그대로 복붙하거나 따라치면 코드몽키!
직접 고민하고 코드짜서 사람이 되보자.
Copy $('.list').click(function(e){
if (e.target == document.querySelectorAll('.tab-button')[0] ){
tabOpen(0)
}
if (e.target == document.querySelectorAll('.tab-button')[1] ){
tabOpen(1)
}
if (e.target == document.querySelectorAll('.tab-button')[2] ){
tabOpen(2)
}
})
