자바스크립트 Event

1. 자바스크립트 Event

자바스크립트에서는 각 element들에 어떤 동작을 취했을 때 발생할 이벤트 처리를 해줄 수 있다.

방법엔 두가지가 있는데
1) element.addEventListener("이벤트이름",실행함수이름);
2) element.이벤트이름=실행함수이름;

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

function handleTitleClick(){
    
    title.style.color="blue"
    console.log("title was clicked!");
}

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

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

function handleWindowResize(){
    document.body.style.backgroundColor="tomato"; //body는 특별해서 바로 document에서 가져올수 있는 것!
}

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

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

function handleWindowOnline(){
    alert("yes wifi!");
}
title.addEventListener("click",handleTitleClick); //함수이름뒤 괄호x!
//== title.onclick=handleTitleClick;
title.addEventListener("mouseenter",handleMouseEnter)
// ==title.mouseenter=handleMouseEnter;
title.addEventListener("mouseleave",handleMouseLeave);
//addEventListener 이 좋은 이유는 나중에 removeEventListener도 가능해서

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

window, element 등에 적용할 수 있는 이벤트들은
https://developer.mozilla.org/en-US/docs/Web/ 에서 확인해보도록 하자.