⊙ 이벤트 객체 :
＃알아야 할 개념 :
● 개념1 : 이벤트 객체의 정의
○ 정의 : onclick 프로퍼티 || addEventListener() 프로퍼티 메소드로 이벤트 핸들러 등록시, 동작과 해당 태그의 상호 연결이 가능하도록 하는 역할을 해주는 객체이다.
- Ex
const btn = document.querySelector('BUTTON'); //버튼 태그의 요소노드 변수 저장
function printBtn(event)
{
event.target.style.backgroundColor = "yellow";
}
btn.addEventListener('click',printBtn);
//버튼을 마우스 왼쪽 클릭으로 누를 시, 버튼의 배경색을 yellow로 변한다.● 개념2 : 이벤트 객체의 주 프로퍼티 (2가지)
○ event.target : 요소노드의 해당 태그를 의미한다.
○ event.type : 어떤 동작의 대한 이벤트 유형을 를 의미한다. //'click', 'keydown' , 'contextmenu'...
◎ 연습문제 :
const toDoList = document.querySelector('#to-do-list');
const items = toDoList.children;
items[0].addEventListener('click', function() {
items[0].classList.toggle('done');
});
items[1].addEventListener('click', function() {
items[1].classList.toggle('done');
});
items[2].addEventListener('click', function() {
items[2].classList.toggle('done');
});코드를 실행해 보니 클릭했을 때 스타일도 변하고 나름대로 잘 작성한 것 같지만, 반복되는 부분들이 너무 많아 만약 할 일들이 점점 더 늘어난다면 이런 비슷한 코드를 훨씬 더 많이 작성해야 할 것 같습니다.
그리고 방금 지용이가 작성한 코드처럼 addEventListner를 호출할 때 바로 작성한 이벤트 핸들러는 removeEventListener로 제거할 수도 없는데요. 지용이는 이를 어떻게 해결해야 할지 막막합니다.
지용이를 위해 아래 내용들을 완성해 주세요.
- 1. 이벤트 객체를 활용한 이벤트 핸들러, updateToDo 함수를 작성한다. 이 함수는 이벤트가 발생한 대상에 'done'이라는 class 속성값을 toggle하는 함수여야 합니다.
- 2. 반복되는 부분들이 좀 더 간단하게 정리되도록 이벤트 핸들러를 등록하는 반복문을 작성해 주세요.
코드를 잘 작성했다면, 첫 번째 두 번째 할 일은 클릭했을 때 'done'이라는 class 속성값이 toggle되면서 스타일이 변하고, 세 번째 할 일은 클릭을 해도 아무런 변화가 없어야 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오늘 할 일</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<h2 class="title">오늘 할 일</h2>
<ul id="to-do-list" class="to-do-list">
<li>자바스크립트 공부하기</li>
<li>고양이 화장실 청소하기</li>
<li>고양이 장난감 쇼핑하기</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>body {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.main {
width: 350px;
margin: 40px;
padding: 30px 0;
background-color: #FCFCFC;
box-shadow: -5px -5px 20px #DFDFDF, 5px 5px 20px #BABECC;
border-radius: 8px;
text-align: center;
}
.title {
margin: 15px auto;
font-size: 30px;
font-weight: 600;
color: #9600FF;
}
#to-do-list {
width: 280px;
margin: 0 auto 15px;
padding: 0;
list-style: none;
}
#to-do-list li {
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 40px;
margin: 8px auto 15px;
border-bottom: 1px solid #9600FF;
cursor: pointer;
}
.done {
opacity: 0.5;
text-decoration: line-through;
}○ 해설 :
- 전략 :
<li>태그들을 for문을 이용해 classList.add('done') || toggle('done') 로 class를 추가하여, 버튼을 누를시, done css 스타일 시트가 적용되도록 해야한다.
- 과정 : //순서 암기하자! 자주 쓰임
①. 버튼을 누를 시 , 해당 태그가 어떤 변화동작이 되어야 하는지의 메소드를 먼저 선언 //function updateToDo() 작성
②. <li> 태그들 이벤트 등록 // for + addEventListener
③. removeEventListener// 특정 리스트는 적용안되도록 하는 방법임
- 정답 :
const toDoList = document.querySelector('#to-do-list');
const items = toDoList.children;
// 1. updateToDo 함수를 완성해 주세요
//버튼 누르면 적동되야할 내용 구현
function updateToDo(event) {
event.target.classList.add('done');
}
// 2. 반복문을 활용해서 각 li태그에 이벤트 핸들러를 등록해 주세요
for(let i =0;i<items.length;i++)
{
items[i].addEventListener('click',updateToDo);
}
// 테스트 코드
items[2].removeEventListener('click', updateToDo);
'CodeIt_Sprint > JavaScript_중급' 카테고리의 다른 글
| (7)JavaScript중급_3_4_이벤트 위임 문제 , 해결방법은 if조건절 + event.contains() 메소드 (5) | 2024.11.13 |
|---|---|
| (6)JavaScript중급_3_3_이벤트 버블링과 이벤트흐름(DOM이벤트객체 경로과정) (1) | 2024.11.13 |
| (4)JavaScript중급_3_1_이벤트핸들러 등록 (0) | 2024.11.13 |
| (2)JavaScript중급_2_DOM객체_개념부분(이론요약)[작성중..] (0) | 2024.11.11 |
| (1)JavaScript중급_1_태그를 JS에 호출하는 방법, 이벤트핸들링,핸들러 (1) | 2024.11.11 |
