- element를 찾아라
- event를 listen해라
- 그 event에 반응해라
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first" class="Momentum">
<h1>Grab me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>JS
const title = document.querySelector(".Momentum h1");
const handleMouseEnter = () => {
title.innerText = "Mouse is here!";
}
const handleClickEvent = () => {
title.style.color = "red";
}
const handleOnMouse = () => {
title.innerText = "Mouse is gon!";
}
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("click", handleClickEvent);
title.addEventListener("mouseleave", handleOnMouse);결과:
addEventListener의 첫번째 인자로 사용한 event에 대해
- click
- 사용자의 클릭을 감지하여 두번째 인자인 함수를 실행한다.
- 위 코드에서는 클릭하여 HTML 요소의 스타일인 색상을 변경.
- mouseenter
- 사용자가 HTML 요소에 마우스가 들어갔을때 함수를 실행한다.
- 위 코드에서는 텍스트를 변경하고 있다.
- mouseleave
- 사용자가 HTML 요소위에 마우스를 둔 상태에서 요소 밖으로 빠져 나왔을때 함수를 실행한다.
- 위 코드에서는 텍스트를 변경하고 있다.
event를 사용하는 두가지 방법
- addEventListener
- onEventName
JS
const title = document.querySelector(".className div");
const handleClick = () => {
title.innerText = "Hello!";
}
title.addEventListener("click, handleClick");
===
title.onclick = handleClick;
addEventListener 구문과 onclick 구문은 기능적으로 완전히 일치한다.addEventListener를 사용하면 추후에 removeEventListener로 이벤트 삭제가 가능하다!
window Event
document가 JavaScript에서 기본적으로 제공되듯이 window도 기본으로 제공하는 객체 아마도 여기에 포함된 메서드를 사용할듯
- resize
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first" class="Momentum">
<h1>Grab me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>JS
const handleWindowResize = () => {
document.body.style.backgroundColor = "tomato";
}
window.addEventListener("resize", handleWindowResize);결과:
- document.body 구문이 중요한데 document.div(HTML요소)는 안된다.
- document 객체의 중요 요소인 body, title, head 등은 존재 하지만 HTML의 요소는 querySelector 또는 getElementById 등으로 찾아와야 함
- clipboard events(copy, cut, paste)
const handleWindowCopy = () => {
alert("Copy this");
}
window.addEventListener("copy", handleWindowCopy);결과:
- addEventListener의 첫번째 인자만 copy, cut, paste로 바꿔주면 복사, 잘라내기, 붙여넣기 등을 감지하여 함수를 실행한다.
- 위 예제에서는 복사를 하면 경고창을 띄우고 있다.
- connect Event(online, offline)
JS
const handleWindowOnline = () => {
alert("Wifi on");
}
const handleWindowOffline = () => {
alert("Wifi off");
}
window.addEventListener("online", handleWindowOnline);
window.addEventListener("offline", handleWindowOffline);결과:
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Momentum App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="first" class="container">
<h1>Click me!</h1>
</div>
<script src="app.js"></script>
</body>
</html>JS
const CilckText = document.querySelector(".container h1");
const handleClick = () => {
if(CilckText.style.color === "red") {
CilckText.style.color = "blue";
} else {
CilckText.style.color = "red";
}
}
CilckText.addEventListener("click", handleClick);JS의 중복을 제거해본다
JS
const clickText = document.querySelector(".contaniner h1");
const handleClick = () => {
const currentColor = clickText.style.color
let changedColor
if (currentColor === "red") {
changedColor = "blue"
} else {
changedColor = "red"
}
clickText.style.color = changedColor
}
clickText.addEventListener("click", handleClick);결과:
Click me! 를 클릭 할때 초기 색상은 black이다 그러면 else 구문에 changedColor에 red가 할당되고 clickText.style.color = red가 되어 함수는 종료된다.
다시 click me!를 클릭하면 색상은 red이므로 첫번째 if구문의 코드가 실행되어 changedColor에 blue가 할당되고 clickText.style.color = blue가 되어 함수는 종료된다.
프론트엔드 개발자 지망생