JS Events

💡document.querySelector(""); 를 통해서 html요소를 가져오는 방법을 알았고, 그 요소의 내부를 보고싶다면, console.log() 대신 console.dir()을 사용하면된다.(개발자도구에서 사용하면 용이함)

<div class="hello">
      <h1>Grab me!</h1>
      <h1>Grab me123!</h1>
      <h1>Grab me345!</h1>
      <h1>Grab me567!</h1>
 </div>
 
 위 같은 html파일이 있다고 가정하고,
 JS코드를 작성해 elements의 property를 보고싶다면,
 
 const title = document.querySelector(".hello:first-child h1");
 console.dir(title);
 
 위와 같이 특정 element를 지정한다음 dir을 사용해 호출한다.

💡console.dir()을 사용해서 object화된 요소의 elements를 보게되면, onxxxx라고 적혀있는것을 볼 수 있는데, 모두 events에 해당된다.

💡object안에 object가 들어갈 수 있는데 그 중 신기한건 style도 요소의 object속에 있는 object이다. style object의 elements를 보면 JS로 작성되어 있는걸 확인할 수 있는데, 이는 즉 JS로 CSS style을 조작가능하다는 뜻이다.

title.style.color = "blue";
//파랑색으로 변경되게하는 JS 미친놈이네?

💡 events는 말그대로 효과다. 누르거나, 사용자가 입력을 한다거나, 저장한다던지, 마우스를 가져다 둔다거나...

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

function handleMouseEnter() {
  title.innerHTML = "mouse is here!";
}

function handleMouseLeave() {
  title.innerHTML = "mouse is gone!";
}

title.addEventListener("click", handleTitleClick);
// addEventListener이 "click" 이벤트가 발생했을때 함수 handleTitleClicked가 실행시켜지도록 만듬!
위의 코드를 아래와 같이 쓸 수 있다.
title.onclick = handleTitleClick;

title.addEventListener("mouseenter", handleMouseEnter);
title.onmouseenter = handleMouseEnter;

title.addEventListener("mouseleave", handleMouseLeave);

addEventListener 을 더 선호하는 이유는 .removeEventListener 을 사용할 수 있고 나중에 코드가 더 깔끔해지는 장점이 있다.

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

function handleWindowCopy() {
  alert("copier!!!!!!!!!!!!!!");
}
function handleWindowOffLine() {
  alert("SOS no wifi!");
}

function handleWindowOnLine() {
  alert("ALL GOOOOOOOODD!!");
}
window.addEventListener("resize", handleWindowSize);
//윈도우 창 크기 수정될때!
window.addEventListener("copy", handleWindowCopy);
//누군가가 control+c 시도했을때!
window.addEventListener("offline", handleWindowOffLine);
//와이파이 터졌을때!
window.addEventListener("online", handleWindowOnLine);
//와이파이 연결되었을때!

그외 윈도우에 효과를 주는 방법도 있다.