Event

How to use Events

Prefer : 나중에 removeEventListener를 통해서 event listener를 제거 가능!!

🔑 `elementName.addEventListener()` 사용후 click 넘겨주기 → ex) `title.addEventsListener("click", handlteTitleClick);` 🔑 `title.onlick = handleTitleClick;`

console.dir("something"); 햇을때 console창에 on---으로 시작하는것들은 보통 Event입니다.

h1 object 내부에 있는 object : element의 style을 볼수 있는데 javascript 형식으로 작성되어 있음.

addEventListener : event를 listen

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

function handleTitleclick(){
  console.log("title was click");
    title.style.color = "blue"
};

// title.addEventListener("이벤트의 종류 listen", 동작하는function);
title.addEventListener("click", handleTitleclick);

handleTitleClick 다음 ()사용 하면 안됨.
(= javascript에 function만 넘겨주고 유저가 click 할 경우에 javscript가 실행버튼을 대신 눌러주길 바라는것이기 때문에 / 함수에서 () 이 두 괄호를 추가함으로써 실행버튼을 누를 수 있는 거임)

listen 하고 싶은 event를 찾는 방법

1. 구글에 찾고싶은 element 이름 (ex. h1 elment) + MDN 에서 검색
2. 링크 中 'Web APIs' 라는 문장이 포함된 페이지를 찾음 (이 과정이 boring하긴 함)
3. 그래서, 에디터에 console.dir(element) 를 작성하여 console에 출력시켜줍니다.
4. 콘솔에서 엄청많은 property 를 출력해줄것 ( 사용가능한 event는 여기서 찾을수 있음!)
5. property 앞에 on이 붙어있다면 그것이 바로 event listener!!
6. event를 사용할 때에는 onabrot 대신 abort 를 사용해야함! (on 뺴라는 소리)

이벤트 종류 간단하게

• onmouseenter 마우스가 title 위에 올라갈때 click은 하지않고 그냥 위에 위치할때의 event
  
• onmouseleave 마우스가 위치를 떠낫을때~
  

More Events

Window Event Listen (기본적으로 제공됨)**

• devicemotion : 모바일이 움직이거나 할때 발상하는 event
• reseize : h1는 resize할 수 없고 window는 resize할 수 있음

function handleWindowResize() {
  document.body.style.backgroundColor = "tomato";
}
/* h1처럼 document밑으로 가져올 수 없엉 / h1랑 document는 다르다*/

💫 `document`의 `body, head, title` 이런것들은 중요하기때문에 존재하는것이지 나머지 element들은 `querySelector` 나 `getElementsById` 등으로 찾아야함!

// HTML in JavaScript

const h1 = document.querySelector("div.hello:first-child h1");
// querySelector는 첫번째 element를 가져옴
// h1.innerText = "hello"; // javascript object 속 property를 변경

console.dir(h1);

function handleTitleclick() {
  console.log("Title was click");
  h1.style.color = "blue";
}

function handleMouseEnter() {
  h1.innerText = "Mouse is here!!🐭"
}

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

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

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

function handleWindowOffline() {
  alert("SOS no Wi-Fi");
}

function handleWindowOnline() {
  alert("ALll GOodd")
}

h1.addEventListener("click", handleTitleclick);
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

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