[2-3] Events

choimarmot·2024년 1월 16일

[노마드 코더] 바닐라 JS로 크롬 앱 만들기

목록 보기

9/28

바닐라 JS로 크롬 앱 만들기 [2-3] Events

참고: HTMLHeadingElement - Web APIs | MDN

Web APIs : 자바스크립트 관점

console.dir 사용해서 코드 내부를 보면 on으로 시작하는 것들이 있는데 이것들이 event listener

예) 클릭 하면 event, 마우스가 h1 위로 올라가도 event, 이름 적는 것 등 대부분 모든게 이벤트

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>valila js</title>
</head>
<body>
    <div class="hello">
    <h1>click me!</h1>
    </div>
    <script src="web.js"></script>
</body>
</html>

const title = document.querySelector(".hello:first-child h1");

console.dir(title);

title.style.color = "blue"

.hello:first-child h1에 해당하는 click me!의 색상을 blue로 변경

console.dir을 이용해서 on에 해당하는 것들을 찾아서 이벤트를 찾을 수 있음

eventListener

addEventListener

지정하는 이벤트를 감지하고 행동

.removeEventListener 사용해서 제거 가능

Click event

const title = document.querySelector(".hello:first-child h1");

function handleTitleClick() {
    console.log("title was clicked!");
}

title.addEventListener("click", handleTitleClick); // 클릭하는 이벤트를 알아보는 것을 명시

title 클릭 시 : title was clicked!

("click", handleTitleClick) : 클릭하는 것이 인식되면 handleTitleClick이라는 함수 실행

mouseenter event

const title = document.querySelector(".hello:first-child h1");

function handleMouseEnter() {
    console.log("mouse is here!");
}
title.addEventListener("mouseenter", handleMouseEnter);

응용

const title = document.querySelector(".hello:first-child h1");

function handleTitleClick() {
    title.style.color = "blue";
}

function handleMouseEnter() {
    title.innerText = "Mouse is here!";
}

function handleMouseLeave() {
    title.innerText = "Mouse is gone!";
}
title.addEventListener("click", handleTitleClick);
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

on 활용

const title = document.querySelector(".hello:first-child h1");

function handleTitleClick() {
    title.style.color = "blue";
}

title.addEventListener("click", handleTitleClick);
title.onclick = handleTitleClick
/* 결과 동일 */

간단하지만 나중에 삭제하려면 직접 찾아서 해야해서 잘 안쓰는듯?
(더 알아보기)

window event

resize

const h1 = document.querySelector(".hello:first-child h1");

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato";
}

window.addEventListener("resize", handleWindowResize);

화면 크기가 변하면 body의 배경색이 토마토로 변경

copy

const h1 = document.querySelector(".hello:first-child h1");

function handleWindowCopy() {
    alert("copier!")
}
window.addEventListener("copy", handleWindowCopy);

복사하면 copier! 경고창 출력

Connection events

WIFI (offline, online)

const h1 = document.querySelector(".hello:first-child h1");

function handleWindowOffline() {
    alert("SOS no WIFI");
}

function handleWindowOnline() {
    alert("all good");
}

window.addEventListener("offline", handleWindowOffline)
window.addEventListener("online", handleWindowOnline)