JavaScript - 이벤트(event)

문강현·2025년 8월 17일

시작하며

이벤트가 무엇인지 무슨 역할을 하는 것인지 작성해보고 어떻게 사용하는지 또 어떤 종류가 있는지 내가 배운 내용을 토대로 작성 해보려고 합니다.

Event?

이벤트란 웹페이지에서 발생하는 동작이나 사건을 의미 합니다. 사용자의 클릭, 키보드 입력, 페이지 로딩 등 다양한 상호작용이나 브라우저 자체에서 발생하는 변화를 포함합니다. 이러한 이벤트를 감지하고 처리하는 기능을 통해 동적인 웹 페이지를 만들 수 있습니다.

이벤트의 여러가지 종류

마우스 이벤트

이벤트	설명
click	마우스 버튼을 클릭했을 때 이벤트 발생
dblclick	마우스 버튼을 더블 클릭했을 때 이벤트 발생
mousedown	마우스 버튼을 누르고 있을 때 이벤트 발생
mouseup	누르고 있던 마우스 버튼을 뗄 때 이벤트 발생
mousemove	마우스를 움직일 때 이벤트 발생
mouseover	마우스를 요소 위로 움직였을 때 이벤트 발생
mouseout	마우스를 요소 밖으로 움직였을 때 이벤트 발생
mouseenter	해당 요소에 마우스 커서를 올려놓았을 때 이벤트 발생
mouseleave	해당 요소에 마우스 커서를 빼낼 때 이벤트 발생

form 이벤트

이벤트	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

key 이벤트

이벤트	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

등등 여기에 못담은 여러 이벤트 들이 있습니다.

how?

이제 어떻게 사용하는지 알아보겠습니다.

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

console.dir(title);

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

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

function handleMouseLeave(){
    title.innerText = "Mouse is gone";
}

function handleWindowRisize(){
    document.body.style.background="tomato";
}

function handleWindowCopy(){
    alert("copier!");
}

function handleWindowOffline(){
    alert("No wifi");
}

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

title.addEventListener("click",handleTitleClick);
title.addEventListener("mouseenter",handleMouseEnter);
title.addEventListener("mouseleave",handleMouseLeave);

window.addEventListener("resize",handleWindowRisize);
window.addEventListener("copy",handleWindowCopy);
window.addEventListener("offline",handleWindowOffline);
window.addEventListener("online",handleWindowOnline);