● 개념1 : 태그에 이벤트 핸들러 등록,제거하기 => addEventListener(),removeEventListener()
○ 문법 :
- 요소노드.addEventListener( 동작에 해당되는 event , 함수이름 || 직접 함수 작성 {...});
- Ex_
const btn = document.getElementbyTagName('button');
function btnClickPrint(){
console.log('버튼 누르면 출력됨');
}
//'click' 왼쪽 마우스 클릭 동작에 대한 event 명칭이다.
btn.addEventListener('click',btnClickPrint);
○ 핸들러 등록 방법 2가지
방법1_ 이벤트 핸들러를 제거할 필요가 없다면, => 매개인자 2번째 함수자리에 직접 함수 작성으로 등록하는 방법 (이유 : 저딴식으로 등록하면, 해제가 안됨)
const btn = document.getElementbyTagName('button');
//'click' 왼쪽 마우스 클릭 동작에 대한 event 명칭이다.
btn.addEventListener('click',function(){
console.log('버튼 누르면 출력됨');
});방법2_ 이벤트 핸들러를 제거할 필요 => 함수를 따로 선언한 후, 매개인자 2번째 자리에 함수명 대입
const btn = document.getElementbyTagName('button');
function btnClickPrint(){
console.log('버튼 누르면 출려됨');
}
//'click' 왼쪽 마우스 클릭 동작에 대한 event 명칭이다.
btn.addEventListener('click',btnClickPrint);
//핸들러 등록 해제=>removeEventListener()
btn.removeEventListener('click',btnClickPrint);● 연습문제 :
다음 HTML 코드를 보고 아래의 문제를 해결해 주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>오늘 할 일</title>
</head>
<body>
<button id="btn">Click!</button>
<script src="index.js"></script>
</body>
</html>문제1 :
아래와 같이 코드를 작성한 다음 프로그램을 실행했습니다. 다음 중 웹 페이지에 나타나는 버튼을 클릭 했을 때 콘솔에 출력되는 결과로 올바른 보기를 선택해 주세요.
const btn = document.querySelector('#btn');
function printBtn() {
console.log(btn.outerHTML);
}
btn.onclick = function() {
console.log('click!');
};
btn.onclick = printBtn;
btn.removeEventListener('click', printBtn);해설 :
- 태그의 oinclick속성으로 함수 대입으로 등록한 핸들러는 딱 1개씩밖에 등록 안됨 => 따라서, 최종 등록 메소드는 printBtn() 밖에 안됨
- 마지막에 removeEventListener는 addEventListener로 등록된 함수들만 제거대상 => 따라서 등록된것이 아무것도 없으므로, 제거된것도 없다.
답 :
<button id="btn">Click!</button>
문제2 :
아래와 같이 코드를 작성한 다음 프로그램을 실행했습니다. 다음 중 웹 페이지에 나타나는 버튼을 클릭 했을 때 콘솔에 출력되는 결과로 올바른 보기를 선택해 주세요.
const btn = document.querySelector('#btn');
function printBtn() {
console.log(btn.outerHTML);
}
function printHi() {
console.log('Hi!');
}
btn.addEventListener('click', printBtn);
btn.removeEventListener('click', printHi);
btn.addEventListener('click', printHi);
btn.addEventListener('click', function() {
console.log('click!');
});
btn.removeEventListener('click', function() {
console.log('click!');
});해설 :
=> 최종 등록된 핸들러
- onclick 에 등록된 핸들러 : X
- addEventListener로 등록된 핸들러 : printBtn, printHi , "click"출력 메소드
답 :
<button id="btn">Click!</button>
Hi!
click!
● 개념2 : 이벤트 객체 => 어떠한 동작과 어떤 태그가 관련되어있는지 등의 정보를 담고있는 객체
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content" class="btns">
<input type="text" id="myInput" placeholder="type anything">
<button id="myBtn">click me!</button>
</div>
<script>
//여기에 작성하기
</script>
</body>
</html>
○ 예시 : input 태그에서 클릭됐을 시, || 키보드 입력시 의 이벤트 type이 출력되도록, JavaScript 코드작성 하기
//input에 해당되는 태그
const input = document.querySelector('#myInput');
//'keydown' : 해당 태그에 키보드 입력 동작이 있을 시
input.addEventListener('keydown',function(event){
console.log(event)
//event 객체 출력
});- console창 출력장면 :
=> 더 자세히 보면, event객체의 프로퍼티를 알 수 있는데, 여기서
- event.type : 해당 동작에 대한 event값이 저장됨
//예: 'click', 'keydown' : 마우스 왼쪽 클릭, 키보드 입력
- event.target : 해당 동작에 대해 이벤트가 발생한 요소(태그)
- event.currentTarget : 이벤트핸들러가 등록된 요소(태그)
//위의 예시에는 input가 출력된다.
● 연습문제 :
- 이벤트 객체를 활용한 이벤트 핸들러, updateToDo 함수를 작성한다. 이 함수는 이벤트가 발생한 대상에 'done'이라는 class 속성값을 toggle하는 함수여야 합니다.
- 반복되는 부분들이 좀 더 간단하게 정리되도록 이벤트 핸들러를 등록하는 반복문을 작성해 주세요.
코드를 잘 작성했다면, 첫 번째 두 번째 할 일은 클릭했을 때 'done'이라는 class 속성값이 toggle되면서 스타일이 변하고, 세 번째 할 일은 클릭을 해도 아무런 변화가 없어야 합니다.
- index.html
<!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></script>
</body>
</html>- style.css
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;
}답 :
★내가 자주 틀리는 부분
=> lists 들을 유사배열 형태로 변수에 저장할 떄,
const lists = document.querySelectorAll('.to-do-list'); (X)
const lists = document.querySelectorAll('.to-do-list li') (O) //정확히 태그이름들을 지정하자!!
const lists = document.querySelectorAll('.to-do-list li');
function addDone(event) {
event.target.classList.toggle('done');
}
for (let li of lists) {
li.addEventListener('click', addDone);
}
lists[2].removeEventListener('click',addDone);
