자바스크립트 (13) - 더많은 이벤트

단순 클릭이나 마우스 올리기를 넘어 정말 유용한 이벤트들이 있음 .

 

윈도우의 인터페이스 또는 오브젝트임.

 

이벤트 내부를 살펴보고 이벤트를 리스닝하는 다른 방법을 살펴보자.

 

 

const title = document.querySelector("div.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);

addEventListener을 사용할 수도 있지만,

oneventname property 에 event listener 를 할당함으로서 사용가능.

 

title.onclick = handleTitleClick;

title.onmouseenter = handleMouseEnter;

title.addEventListener("mouseleave", handleMouseLeave);

다 같은거다.

 

근데 addEventListener 를 쓰게된다면

removeEventListener 를 통해서 이벤트 리스너를 제거해줄 수 있다.

title.removeEventListener

 

다큐먼트가 자스에서 기본적으로 제공되듯이,

window도 기본적으로 제공한다.

 

디바이스모션. 핸드폰이 움직일떄 발생하는 이벤트도 잇음.

 

그리고 리사이즈 이벤트도 있다. 이 이벤트를 listen 해보자. 

 

 

function handleWindowResize(){

    document.body.style.backgroundColor = "tomato";

}

window.addEventListener("resize", handleWindowResize);

 

콘솔에 

 

document.body 치면 바디 태그만 가져올 수 있는데

바디태그 보면 토마토로 바뀐걸 알 수 있음. 

 

copy 도 감지 할 수 있다.

 

function handleWindowCopy() {

    alert("copier!")

}

 

window.addEventListener("copy, handleWindowCopy);

 

와이파이에 연결 돼 잇는지 아닌지도 알 수 있다.

function handleWindowOffline(){

    alert("SOS no WIFI")

}

 

function handleWindowOnline(){

    alert("all good")

}

 

window.addEventListener("offline", handleWindowOffline);

window.addEventListener("online", handleWindowOnline);