JavaScript 입문과 웹 UI개발(19)-이벤트 버블링과 이벤트관련 함수들
2022. 10. 7. 18:40ㆍ애플코딩 javascript 강의
반응형
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<!--부트스트랩 css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
crossorigin="anonymous">
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
</head>
<body>
<div class="main-bg">
<h4>Shirts on Sale</h4>
<button id="login" class="btn btn-danger">로그인</button>
</div>
<div class="black-bg" data-id="hi">
<div class="white-bg">
<h4>로그인하세요</h4>
<!-- 모달창 안에 form 태그를 만들건데 예쁘게
bootstrap에서 가져다가 쓸수도 있음
-->
<form action="success.html">
<div class="my-3">
<input type="text" class="form-control">
</div>
<div class="my-3">
<input type="password" class="form-control">
</div>
<button type="submit" id="gogo" class="btn btn-primary">전송</button>
<button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
</div>
</div>
<ul class="list-group">
<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>
<script>
//검은 화면 클릭시 로그인 창을 닫기
$('.black-bg').on('click', function(e){
// e.target; //유저가 실제로 누른거
// e.currentTarget;//이벤트 리스너 달린 곳 ==> this라고 사용할 수 있다.
// e.preventDefault(); //클릭 안한것처럼 처리
// e.stopPropagation(); //내 상위요소로 이벤트 버블링 막아줌
console.log((e.target));
console.log($('.black-bg'));
//검은 화면 클릭시 닫기 첫번째 방법
if(e.target==document.querySelector('.black-bg')){
// $(e.target)== $('.black-bg')
// $(어쩌고).is($(어쩌고)) jQuery는 이렇게 비교하는게 안전
//모달창 닫기
// $('.black-bg').removeClass('show-modal');
}
console.log(e.target.dataset.id);
//검은 화면 클릭시 닫기 첫번째 방법(dataset)
//data-id로 id를 넣어준 다음 dataset을 통해 클릭한 이벤트가 해당 아이디 인지
//확인해서 버블링을 방지할 수 있다.
if(e.target.dataset.id=='hi'){
$('.black-bg').removeClass('show-modal');
}
})
//이벤트 버블링
//이벤트가 상위 html로 퍼지는 현상
//예를들어 <div class="white-bg"> 를 클릭하면 상위 div 태그인 <div class="black-bg">도 클릭한걸로 된다
//<h4>태그를 클릭하면 <div class="white-bg">와 <div class="black-bg">도 클린하거로 되는 현상
//모달창 띄우기
$('#login').on('click', function(){
$('.black-bg').addClass('show-modal');
});
//모달창 닫기
$('#close').on('click', function(){
$('.black-bg').removeClass('show-modal');
});
//전송버튼 클릭시
$("#gogo").on("click", function(e){ //(참고)$("form").on("submit", function(){})로 써도 똑같이 된다.
e.preventDefault(); //전송되는 이벤트를 전송 안되게 해준다.
//아이디나 비밀번호가 공백인 경우
if($(".form-control").eq(0).val()=="" ||$(".form-control").eq(1).val()=="" ){
alert("아이디와 비밀번호를 입력해주세요");
//아이디가 18자를 넘는경우
}else if(Number($(".form-control").eq(0).val().length)>18){
//Number(여기다가 숫자로 만들고 싶은 문자열을 넣음) ===> Number()를 통해 문자열을 숫자로 바꿈
alert("아이디가 18자를 넘었습니다")
}else{
//모두 충족시 전송
if(/\S+@\S+.\S/.test($(".form-control").eq(0).val())){
if(/[A-Z]/.test($(".form-control").eq(1).val())){
$("form").submit();
}else{
alert('비밀번호에 적어도 하나의 대문자가 있어야합니다')
}
}else{
alert('이메일 형식에 맞게 입력해주세요 ex) aaa@aaa.aaa')
}
}
})
</script>
<!--거의 모든 자바스크립트 라이브러리는 <body> 끝나기전에 넣는거 권장-->
<!--부트스트랩 JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</body>
</html>main.css
:root{
scroll-behavior:auto;
}
.navbar-brand{
font: size 30px;
}
.navbar{
/* 상단고정 */
position: fixed;
width: 100%;
z-index: 5;
}
.slide-containver{
width: 300vw;
transition: all 1s;
}
.slide-image{
float: left;
/*none (기본값) : 정렬하지 않는다.
left : 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다. */
width: 100vw;
}
.slide-image img{
width: 100%;
}
.alert-box{
background-color: skyblue;
padding: 20px;
color: white;
border-radius: 5px;
display: none;
/* 숨길때는 none 나타낼때는 block */
}
.list-group{
display: none;
}
.show{
display: block;
}
/* 모달창 용 =====================*/
.black-bg {
width : 100%;
height : 100%;
position : fixed;
background : rgba(0,0,0,0.5);
z-index : 5;
padding: 160px;
visibility: hidden;
/* 애니메이션 줄때 display: none 대용 이게 잘먹힌다
display:none은 html에서 없애는거고 visibility: hidden은 모습만 숨기는것
*/
opacity: 0;
/* 0은 완전히 투명해서 안보이고 1에 가까울수록 잘보임 */
/* position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다.
이때 요소들의 수직 위치를 z-index 속성으로 정합니다.
값은 정수이며, 숫자가 클 수록 위로 올라오고, 숫자가 작을 수록
아래로 내려갑니다. */
transition: all 1s;
/* 모든 속성이 변할때 1초가 걸리게함 */
}
.white-bg {
background: white;
border-radius: 5px;
padding: 30px;
}
/* ==========================*/
.show-modal{
visibility: visible;
/* 애니메이션 줄때 display: block 대용 */
opacity: 1;
}강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(21)-약간 복잡한 Array & Object 데이터바인딩 (0) | 2022.10.08 |
|---|---|
| JavaScript 입문과 웹 UI개발(20)-dataset을 이용한 tab 기능 (0) | 2022.10.07 |
| JavaScript 입문과 웹 UI개발(18)-탭기능 만들며 배우는 for 반복문 (0) | 2022.10.07 |
| JavaScript 입문과 웹 UI개발(17)- 스크롤 이벤트로 만드는 재밌는 기능들 (0) | 2022.10.07 |
| JavaScript 입문과 웹 UI개발(16)-함수의 return 문법 & 소수점 다루기 (0) | 2022.10.04 |