바닐라 JS - Events

 

Events

 

- 마우스가 올라가거나 입력을 끝내고 enter를 누르거나 wifi에서 접속이 해제되는 경우, 클릭을 하는 것 모두 event

 

listen

const title = document.querySelector(".hello h1");

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

title.addEventListener("click", handleTitleClick);

// title을 클릭하면 title 색이 파란색으로 변함

title.addEventListener("이벤트", 이벤트가 발생하면 호출할 함수);

함수 뒤에 실행() 추가 안해도 됨 js가 실행시켜줌

 

element를 찾아 element에 event listener를 추가하여 event를 listen하고 event에 반응

 

event 찾기

h1 html element mdn

mdn: Mozilla Developer Network

검색결과에서 Web APIs를 찾는다

HTMLHeadingElement

 

console.dir() 에서 on-으로 시작하는 항목: event (on은 빼고 적용)

 

const title = document.querySelector(".hello h1");

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

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

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

title.onclick = handleTitleClick;
title.onmouseenter = handleMouseEnter;
title.onmouseleave = handleMouseLeave;

.on이벤트이름 이렇게도 이벤트 실행 가능

그러나 .addEventListener를 선호

.removeEventListener로 이벤트 제거 가능

 

 

window event

const h1 = document.querySelector(".hello h1");

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

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

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

function handleWindowOnline() {
    alert("ALL GOOOD");
}

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

document.title == HTML title