티스토리 뷰
JavaScript
23-01-03 클래스 속성 제어 실습, 다중이벤트, 이벤트전파, 이벤트전파원리, 이벤트전파여러클래스, 이벤트중단, 이벤트객체와 dataset
JadeStone 2023. 1. 3. 19:32<어제 복습>
#클래스의 속성 제어하기 내용 중에서.
-클래스라는 키워드는 디자인 할 때 많이 사용할 것.
*실습 (선생님이 작성해주신 내용.)
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.center {
text-align: center;
}
.content {
overflow: hidden;
border: 1px solid #777;
}
.content,
.content .left,
.content .right {
width: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 5px;
}
.content .right,
.content .left {
float:left;
}
.left .inner,
.right .inner {
border: 1px solid #777;
height: 300px;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header>
<div class="center">
<h2>토글형태 활용하기</h2>
<button id="btn1" class="dark">어둡게보기</button>
<button id="btn2" class="name">이름보기</button>
<!--추가-->
<hr>
</div>
</header>
<section>
<div class="content">
<div class="left">
<div class="inner"><img src="profile.png"></div>
</div>
<div class="right">
<div class="inner">
<p class="info" style="display:none;">홍길자<br>20세<br>능력단위<br>Java, Oracle, JSP, CSS, Javascript</p>
<p class="dict">자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다</p>
<a href="https://www.naver.com">위키백과</a>
</div>
</div>
</div>
</section>
<script>
//var body = document.querySelector("body");
var body = document.body; //body
var all = document.querySelectorAll("p, a, h2"); //p, a, h2
var btn1 =document.getElementById("btn1");
btn1.onclick = function() {
//x 클래스
if(btn1.classList.contains("x") ) {
btn1.classList.remove("x");
btn1.innerHTML = "어둡게보기";
body.style.backgroundColor = "#fff";
for(var i = 0; i < all.length; i++) {
all[i].style.color = "#000";
}
} else {
btn1.classList.add("x");
btn1.innerHTML = "밝게보기";
body.style.backgroundColor = "#000";
for(var i = 0; i < all.length; i++) {
all[i].style.color = "#fff";
}
}
}
var info = document.querySelector(".info");
var dict = document.querySelector(".dict");
var btn2 = document.getElementById("btn2");
btn2.onclick = function() {
if(btn2.classList.contains("x")) {
btn2.classList.remove("x");
btn2.innerHTML = "내용보기";
info.style.display = "none";
dict.style.display = "block";
} else {
btn2.classList.add("x"); //x추가
btn2.innerHTML = "이름보기";
info.style.display = "block";
dict.style.display = "none";
}
}
</script>
</body>
</html>-결과
*실습 (내가 작성한 내용)
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.center {
text-align: center;
}
.content {
overflow: hidden;
border: 1px solid #777;
}
.content,
.content .left,
.content .right {
width: 50%;
margin: 0 auto;
box-sizing: border-box;
padding: 5px;
}
.content .right,
.content .left {
float:left;
}
.left .inner,
.right .inner {
border: 1px solid #777;
height: 300px;
}
img {
width: 100%;
height: 100%;
}
.darkMode{
background-color: black;
color: white;
}
.lightMode{
background-color: white;
color: black;
}
.imgMovie{
src:img/first_slamdunk.jpg;
}
</style>
</head>
<body>
<header>
<div class="center">
<h2>토글형태 활용하기</h2>
<button id="btn1" class="dark">어둡게보기</button>
<button id="btn2" class="name">슬램덩크영화보기</button>
<!--추가-->
<hr>
</div>
</header>
<section>
<div class="content">
<div class="left">
<div class="inner"><img src="img/슬램덩크.jfif"></div>
</div>
<div class="right">
<div class="inner">
<p class="info" style="display:none;">홍길자<br>20세<br>능력단위<br>Java, Oracle, JSP, CSS, Javascript</p>
<p class="dict">자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다</p>
<a href="https://www.naver.com">위키백과</a>
</div>
</div>
</div>
</section>
<script>
//어둡게 보기 토글 버튼
var body = document.querySelector("body");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
body.classList.toggle("darkMode");
if(body.classList.contains("darkMode")){
btn1.innerHTML ="밝게보기"
} else {
btn1.innerHTML ="어둡게보기"
}
}
//내용 바꾸는 토글 버튼
var btn2 = document.getElementById("btn2");
var img = document.querySelector(".inner img");
var textBox = document.querySelector(".content .right .inner");
btn2.onclick = function(){
img.classList.toggle("imgMovie");
if(img.classList.contains("imgMovie") === true){
img.src = "img/first_slamdunk.jpg";
btn2.innerHTML = "슬램덩크만화보기";
textBox.innerHTML="《THE FIRST SLAM DUNK》는 2022년 개봉된 애니메이션, 모험, 판타지, 액션 영화이다. 도에이 애니메이션과 단델리온 애니메이션 스튜디오가 제작하였다. 일본에서 2022년 12월 극장 개봉하였다."
+ "<a href='https://namu.wiki/w/%EB%8D%94%20%ED%8D%BC%EC%8A%A4%ED%8A%B8%20%EC%8A%AC%EB%9E%A8%EB%8D%A9%ED%81%AC?from=THE%20FIRST%20SLAM%20DUNK' >나무위키</a>";
} else {
img.src = "img/슬램덩크.jfif";
btn2.innerHTML = "슬램덩크영화보기";
textBox.innerHTML = "《슬램 덩크》는 이노우에 다케히코의 농구 만화이다. 1990년부터 1996년까지 《주간 소년 점프》에 연재되었으며, 일본에서 1억 부가 넘게 팔렸다. 단행본은 모두 31권이며, 24권 ‘완전판’으로 다시 나왔다. 도에이에서 애니메이션으로도 만들어졌다"
+ "<a href='https://namu.wiki/w/%EC%8A%AC%EB%9E%A8%EB%8D%A9%ED%81%AC(%EB%A7%8C%ED%99%94)'>나무위키</a>";
}
}
</script>
</body>
</html>-결과
<오늘수업>
*이런게 있다고만 하고 보고 넘어가기. 쓸 일이 없음.
<여기서 부터 JS의 초급과 중급을 나누게 되는 아주 중요한 내용. - > 이벤트 객체>
*이벤트 전파는 상속이랑 비슷하다고 생각하면 좋음. 상속이랑은 다른 개념이지만.
*이벤트 위임 : 부모 태그에 이벤트를 걸어두면 자식 태그들에도 이벤트가 다 걸림.
*이벤트 객체
-어디에서든지(모든 이벤트에서) 이벤트 객체라는 개념을 사용할 수 있음.
-이벤트 발생시 실행되는 함수의 (인자값)으로 현재 실행되는 event객체를 넣어주게 되어있다!!
-보통 함수의 매개변수 자리에 e 라고 선언을 많이 해준다.
- 이벤트가 실행된 타켓은 아래의 사진과 같이 target 속성에서 확인해 볼 수 있다.
console.log(event.target); //이벤트가 동작된 실제 태그
console.log(event.currentTarget);//실제 이벤트가 걸려있는 태그
이 두가지를 잘 비교해서 기억해두도록 하자.
★ 이벤트 발생시 작동하는 함수의 매개변수에 매개변수 명을 넣지 않아도
함수 구현부에서 event 라는 키워드로 이벤트 객체를 사용 가능.
태그.이벤트 = function(){
console.log(event.target);
}
- ul 태그에 이벤트가 걸려있을 떄 ul과 li 둘중에 해당 태그에서만 이벤트가 발생하게 하고 싶으면 아래사진과 같이 해주면된다.
console.dir(e.target);
if(e.target.tagName != "LI") return; //li태그가 아니라면 종료
*위 내용 모두 사용 예시
-코드
<body>
<h3>이벤트 전파 특성 활용하기</h3>
<ul class="parent">
<li>1.홍길동</li>
<li>2.홍길자</li>
<li>3.이순신</li>
<li>4.강감찬</li>
<li>5.둘리</li>
</ul>
선택한 태그의 값:
<p class="result"></p>
<script>
var result = document.querySelector(".result");
//부모에 이벤트를 걸면 자식한테 이벤트가 전파됩니다.
var parent = document.querySelector(".parent");
parent.onclick = function(e){
// console.log(this);
// result.innerHTML = parent.innerHTML;
//이벤트객체 - 이벤트함수에 첫번째 매개변수로 자동 전달됩니다.
// console.log(e);
// console.log(event);
// console.log(event.target); //이벤트가 동작된 실제 태그
// console.log(event.currentTarget);//실제 이벤트가 걸려있는 태그
// console.dir(e.target);
if(e.target.tagName != "LI") return; //li태그가 아니라면 종료
result.innerHTML = e.target.innerHTML;
}
</script>
</body>-결과
*실습 1
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
display: inline-block;
}
</style>
</head>
<body>
<h3>이벤트객체활용</h3>
<div>
<ul id="imgList">
<li><img src="img/1.jpg" alt="1" width="100"></li>
<li><img src="img/2.jpg" alt="1" width="100"></li>
<li><img src="img/3.jpg" alt="1" width="100"></li>
<li><img src="img/4.jpg" alt="1" width="100"></li>
</ul>
결과:
<div class="result">
<img src="img/1.jpg" alt="결과" width="300" >
</div>
</div>
<script>
var imgList = document.querySelector("#imgList");
var printImg = document.querySelector(".result img");
imgList.onclick = function(e){
// console.log(e.target);
// console.log(printImg);
console.dir(e.target);
if(event.target.tagName != "IMG") return;
printImg.src = e.target.src;
//printImg.src - event.target.src; // 매개변수에 e를 안 넣고 event.해도 됨.
}
</script>
</body>
</html>-결과
*실습2
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li {
display: inline-block;
}
table { border-collapse: collapse; border-spacing : 0;}
thead th, tbody td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>이벤트 위임 이용해서 다음을 만들어 보세요.<h2>
<table>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>내용</th>
<th>삭제</th>
</tr>
</thead>
<tbody class="list">
<tr>
<td>1</td>
<td>첫글</td>
<td>hi</td>
<td><button type="button">삭제</button></td>
</tr>
<tr>
<td>2</td>
<td>첫글</td>
<td>hi</td>
<td><button type="button">삭제</button></td>
</tr>
<tr>
<td>3</td>
<td>첫글</td>
<td>hi</td>
<td><button type="button">삭제</button></td>
</tr>
<tr>
<td>4</td>
<td>첫글</td>
<td>hi</td>
<td><button type="button">삭제</button></td>
</tr>
</tbody>
</table>
<script>
var list = document.querySelector(".list");
list.onclick = function(e){
// console.dir(e.target);
if(e.target.tagName != "BUTTON") return;
e.target.parentElement.parentElement.remove();
}
</script>
</body>
</html>-결과
#이벤트 전파의 원리
*기본적으로 실행되는 이벤트 함수들은 버블링 형식( 자식 -> 부모태그의 이벤트) 으로 실행된다.
*이벤트 캡쳐링은 쓸일은 없으나 보고만 감.
* event.stopPropagation() -> 이벤트가 캡쳐페이스나 버블링 페이스를 타고 넘어갈 때 중간에 event.stopPropagation()을 만나면 딱 거기까지만 이벤트가 실행되고 이후의 이벤트는 실행되지 않는다.
event.stopPropagation();//현재 위치까지만 이벤트가 실행되고 이후의 이벤트는 진행 중단, 웬만해서는 사용하지 않는다.
*사용예시
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.func1{width: 300px; height: 300px; background-color: red;}
.func2{width: 200px; height: 200px; background-color: blue;}
.func3{width: 100px; height: 100px; background-color: yellow;}
</style>
</head>
<body>
<div class="func1">
<div class="func2">
<div class="func3">func3자식</div>
</div>
</div>
<script>
/*
DOM에서 이벤트 동작방식은 기본으로 버블링 입니다.
버블링 - 부모, 자식 모두에 이벤트가 있을 때 이벤트가 자식-> 부모 방향으로 전파되는 특징
3번클릭 3 -> 2 -> 1 로 실행됩니다
*/
// var func1 = document.querySelector(".func1");
// func1.onclick = function(){
// alert("func1");
// }
// var func2 = document.querySelector(".func2");
// func2.onclick = function(){
// event.stopPropagation();//이벤트 버블링 중단//부모님의 이벤트를 위임받을 수 없다. 따라서 웬만해서는 사용하지 않는다.
// alert("func2");
// }
// var func3 = document.querySelector(".func3");
// func3.onclick = function(){
// alert("func3");
// }
/*
이벤트 캡쳐링 -> 부모, 자식에 이벤트가 있을 때, 부모 -> 자식으로 전파되는 특징
addEventListTener() 방식으로만 구현해 줄 수 있습니다.
*/
var func1 = document.querySelector(".func1");
var func2 = document.querySelector(".func2");
var func3 = document.querySelector(".func3");
func1.addEventListener("click", function(){
alert("func1");
}, true);
func2.addEventListener("click", function(){
event.stopPropagation();//이벤트 캡쳐링 중단
alert("func2");
}, true);
func3.addEventListener("click", function(){
alert("func3");
}, true);
</script>
</body>
</html>-결과
#이벤트 내에서 타겟들마다 다른 이벤트 효과를 적용하고자 할 때는 클래스 속성을 이용하면 된다.
*예시
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<section id="section">
<div class="list">
<div>
<span>홍길동</span>
<button type="button" class="btn sel">선택</button>
<button type="button" class="btn del">삭제</button>
</div>
<div>
<span>김길동</span>
<button type="button" class="btn sel">선택</button>
<button type="button" class="btn del">삭제</button>
</div>
<div>
<span>홍길자</span>
<button type="button" class="btn sel">선택</button>
<button type="button" class="btn del aaa">삭제</button>
</div>
</div>
</section>
<script>
var list = document.querySelector(".list");
list.onclick = function(){
if(event.target.tagName != "BUTTON") return; //버튼이 아니라면 종료
//console.log(event.target.className);
//console.log(event.target.classList);
var arr = event.target.classList;
if(arr.contains("sel")){//선택버튼
event.target.previousElementSibling.style.color = "red";
} else if(arr.contains("del")){//삭제버튼
event.target.parentElement.remove();
} else if(arr.contains("aaa")){//aaa버튼
}
}
</script>
</body>
</html>-결과
#preventDefault()
*고유 이벤트를 갖고있는 태그들
-a 태그
고유 이벤트 : 클릭시 페이지를 바로 넘겨줌.
-submit 태그
고유 이벤트 : 클릭시 form태그의 데이터를 넘겨줌.
- preventDefault() 는 위와같은 고유 이벤트를 갖고있는 태그들의 고유 이벤트를 중단시켜준다.
*사용예시
-코드
<body>
<div>
<ul class="page">
<li><a href="list.board">1</a></li>
<li><a href="list.board">2</a></li>
<li><a href="list.board">3</a></li>
<li><a href="list.board">4</a></li>
<li><a href="list.board">5</a></li>
</ul>
</div>
<script>
var page = document.querySelector(".page");
page.onclick = function(){
event.preventDefault();//a태그 or submit이 가진 기본이벤트를 중단
if(event.target.tagName != "A") return; //A가 아니라면 종료
console.log(event.target.innerHTML);
//....처리.....
}
</script>
<hr>
<form action="https://www.naver.com">
<input type="text" name="age">
<input type="submit" value="클릭" id="btn">
</form>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
event.preventDefault(); //submit의 고유 이벤트 중단
//....처리
}
</script>
</body>-결과
-a태그를 클릭해도 화면이 넘어가지 않고 자바스크립트의 출력이 나온다.
#태그의 dataset속성 - 태그의 저장소
*태그의 dataset이라는 속성에 우리가 원하는 정보를 담아둘 수 있다.
*data-지정하고싶은이름
data-이후로 붙이는 이름들에 -(타이푼)끼리 연결되는 내용들은 타이푼이 다 사라지고 카멜표기법으로 대체된다. ex) data-user-Age -> userAge 로 이름이 바뀜.*dataset 속성에 값은 문자열 타입으로 저장됨. data-user-info = "student";-객체형 모양의 문자열로 저장되어 있는경우에 객체처럼 정보를 사용하고 싶다면 JSON.parse(데이터); 로 제이슨형태로 바꿔줘서 사용해야한다.이 때 중요한 점은. JSON 형태로 데이터값을 바꿔주기 위해선 데이터의 표현형식을 지켜줘야한다.그 규칙은 키와 값을 각각 쌍따옴표로 묶어줘야한다는 것.data-user-info = '{"id" : "1" , "age" : "10"}' 이렇게. 이점 주의해서 기억해두자.*dataset 속성의 값을 가져오는 법-tag.dataset.내가지정한속성이름;
<body>
<h3>태그의 dataset속성 - 태그의 저장소 </h3>
<!-- data- 으로 시작하고, 뒤에 오는 이름은 자유롭게 작성 -->
<ul class="list">
<li><a href="#" data-user-info='{"id": "1", "age": "10"}'>홍길동</a></li>
<li><a href="#" data-user-info='{"id": "2", "age": "20"}'>홍길자</a></li>
<li><a href="#" data-user-info='{"id": "3", "age": "30"}'>이순신</a></li>
<li><a href="#" data-user-info='{"id": "4", "age": "40"}'>박찬호</a></li>
</ul>
결과:<div class="result"></div>
<script>
var list = document.querySelector(".list");
list.onclick = function() {
//1.
event.preventDefault();
//2.
if(event.target.tagName != "A" ) return;
//3. data- 으로 만들어진 속성은 태그에서 찾아 쓸 수 있어용
// console.dir(event.target);
// console.dir(event.target.dataset);
// console.dir(event.target.dataset.userInfo);
var data = event.target.dataset.userInfo;//현재 단순한 문자열인 상태
//문자열 상태의 정보를 json(객체형 표기법)으로 바꿔준다.
var result = JSON.parse(data); //꼭 객체형 데이터의 키와 값을 쌍따옴표로 감싸주기.
console.log(result);
console.log(result.id);
}
</script>
</body>
*결과
#오늘 배운것드 활용한 실습.
-코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.toggle li {
display: inline-block;
padding: 15px 20px 14px;
width: 25%;
text-align: center;
border: 1px solid #333;
cursor: pointer;
}
.toggle-menu {display: none;}
.active { display: block; }
</style>
</head>
<body>
<!--
1. ul에 이벤트 버블링을 이용해서 클릭이벤트를 걸고 클릭되는 타겟의 data-id를 얻습니다.
2. toggle-menu의 active속성을 삭제
3. data-id의 값에 알맞는 태그에 active속성을 추가하면됩니다.
-->
<section>
<ul class="toggle">
<li data-id="#toggle1">메뉴1</li>
<li data-id="#toggle2">메뉴2</li>
<li data-id="#toggle3">메뉴3</li>
</ul>
<div>
<div class="toggle-menu active" id="toggle1">
토글메뉴1
</div>
<div class="toggle-menu" id="toggle2">
토글메뉴2
</div>
<div class="toggle-menu" id="toggle3">
토글메뉴3
</div>
</div>
</section>
<script>
var toggle = document.querySelector(".toggle");
toggle.onclick = function(e){
// console.log(e.target);
// console.dir(e.target);
if(e.target.tagName != "LI") return;
// console.log(e.target.dataset.id);
// console.dir(e.target.dataset);
var data_id = e.target.dataset.id;
var target = document.querySelector(data_id);
// console.log(target);
// console.dir(target.classList);
//토글메뉴의 태그들 다 가져오기 active 초기화 하기 위해서
var toggleMenu = document.querySelectorAll(".toggle-menu");
//반복분으로 모든 토글메뉴에서 active 클래스 값 삭제
for(var i=0; i<toggleMenu.length; i++){
toggleMenu[i].classList.remove("active");
}
//타겟 토글메뉴에 active 추가
target.classList.add("active"); //타겟 메뉴에 active 넣기
}
</script>
</body>
</html>-결과
<기억하기>
*body 태그 가져올 때
- body는 document의 자식이기 때문에
var body = document.body; 이렇게 해서 태그를 가져올 수 있음.
#currentTarget
-반드시 알아놔야함
#preventDefault()
-반드시 알아놔야함
'JavaScript' 카테고리의 다른 글
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 배열과 탐색
- 자바
- interface #자바
- 박문석 선생님
- 가비지 콜렉팅
- 데이터베이스 수업
- 중앙정보처리학원
- JS ES6 문법
- input 스트림
- 다중 반복문
- 강남역 12번 춣구
- FOR문
- 조건문
- 내포 클래스
- 자바 api
- output 스트림
- 배열 삭제
- 국비학원 수업
- 오코노라멘
- 자바수업
- 박인욱 강사님
- nasted class
- 알람 시계 문제
- 자바스크립트 ES6 문법
- 자바#자바수강기록
- 배열의 정렬
- 강남 중앙정보처리학원
- 국비지원 학원 수업 내용
- 국비학원
- api 활용
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
글 보관함