event listening

• .js파일이 있기 때문에 js를 통해 html 내용을 가져 올 수 있음.
  js에서 대부분 작업할 일: 유저의 event를 listen 하는 것

• 모든 event는 js가 listen(감지)할 수 있음
  event: 어떤 행위를 하는 것
  js 객체 속성명 앞에 on이 붙은 것들은 event임

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

function handleTitleClick() {
  console.log("title was clicked")
}

title.addEventListener("click", handleTitleClick)  // 누군가가 title을 click하는 것을 listen할 거임 → 무언가를 해줘야함

유저가 title을 click할 경우에 js가 브라우저로 하여금 함수 실행버튼() 눌러줌.(js가 함수를 대신 실행시켜주길 바라기 때문에 함수이름 옆에 ()를 붙이지 않았다.)

가장 중요한건 addEventListener 안에 있는 함수는 직접 실행하지 않는다는 것. 브라우저가 실행시켜줄 뿐만 아니라 event에 대한 정보도 담아준다.

title.onclick = titleClick; 은
title.addEventListener("click", handleTitleClick) 과 동일하나
.addEventListener를 선호하는 이유는 .removeEventListener을 통해서 event listener을 제거할수있기 때문이다.

• listen하고 싶은 event 찾기
  요소를 console.dir()에 출력시킨 후 property이름 앞에 on이 붙여진 것을 찾는다. 대신 그 이벤트를 사용할 시 on을 떼고 사용.
  혹은 구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색. 링크에 Web APIs라는 문장이 포함된 페이지를 찾는다. 왜냐면 이건 JS관점의 HTML Heading Element란 의미. https://developer.mozilla.org/en-US/docs/Web/API 참조

• document에서 body,head,title 은 중요해서 언제든
  ex) document.body 로 가져올 수 있고, document.body.style~의 명령이 허용되지만, div같은것들은 호출이 안됨
  div나 h1 등 element 들은 querySelector getElementById등으로 찾아야한다.
  ex) document.querySelector(“h1”);

• window는 기본제공

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

function handleWindowCopy(){
alert(“copier”);
}

window.addEventListener(“resize”, handleWindowResize);
window.addEventListener(“copy”, handleWindowCopy);

---

• 프로그래밍 언어에서 "="(equal) 표시는 오른쪽에 있는 값을 왼쪽에 대입한다는 뜻
• "="가 세개라면 왼쪽과 오른쪽 값이 서로 같은지 확인한다는 뜻

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

function handleTitleClick() {				//step3
  const currentColor = h1.style.color;
  let newColor;
  if (currentColor === "blue") {
    newColor = "tomato";
  } else {
    newColor = "blue";
  }
  h1.style.color = newColor;
}

h1.addEventListener("click", handleTitleClick);   	 //step2

** 스타일은 css로 작업하고 애니메이션은 js로 작업하자

step1. element를 찾아라.
step2. event를 Listen 해라.
step3. 그 event에 반응해라.(함수)