Javascript: to do list
09 Event 행위를 인지하고 반응하게 만들기
From.h
2023. 5. 31. 14:38
728x90
반응형
행위의 인지와 반응
우리가 뭔가 행위를 하여 입력하는 상황을 event라고 합니다.
그럼 이걸 인지하기 위해서 뭘 해야 할까요?
① 먼저 js에서 대상이 될 html 요소(element)를 불러와야겠죠.
② 출력할 무언가에 대한 함수를 만듭니다.
(일종의 기능이죠. 예를 들어 글자가 커져라!, 색이 바뀌어라, 얼마큼 움직여라 등등)
③ 입력받을 값과, 위에서 만든 출력할 함수를 연결시켜 줍니다.
아래와 같이 문자열이 있고, 우리는 이것을 클릭하면 우측 콘솔에 Title was ckicked라는 문구를 출력하라고 할 겁니다.
순서대로 해보죠.
이전 장에서 사용했던 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">
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<div class="title" id="hello">
<h1>Come on me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>
① 먼저 js에 무엇을 불러올 것인가?
html에 있던 title이라는 class 안에 있는 h1 tag의 내용을 가져올 겁니다.
그게 바로 저 Come on me! 라는 문구였죠.
const title = document.querySelector(". title h1");
② 기능이 될 함수를 만들죠.
함수 이름은 handleTitleClick이라고 지어줬습니다.
콘솔에 Title...이라는 문구를 출력하고 명명했습니다.
function handleTitleClick(){
console.log("Title was clicked");
}
③ 무슨 행동을 하면 무엇을 해라.라고 입출력을 연결시켜 줍니다.
title위에 click을 하면, 위에서 만든 함수를 실행시켜라.라고 eventListener를 추가했습니다.
title.addEventListener("click", handleTitleClick);
모아서 보자면,
const title = document.querySelector(".title h1");
function handleTitleClick(){
console.log("Title was clicked");
}
title.addEventListener("click", handleTitleClick);
이것의 결과 위의 Come on me! 라는 문구를 click하면, 콘솔에 다음 문구가 뜨게 됩니다.
글자의 컬러도 바꿔볼까요?
const title = document.querySelector(".title h1");
function handleTitleClick(){
console.log("Title was clicked");
title.style.color = "blue";
}
title.addEventListener("click",handleTitleClick);
title이라는 도큐멘트 안에는 많은 오브젝트 설정을 할 수 있고, style이라 오브젝트 안에 color라는 속성값을 변경 시켜준 것입니다.
이렇게 click에 반응하는 eventListener의 동작 방식을 살펴봤습니다.
BR. h
728x90
반응형