[TIL-42] 노마드코더 크롬앱(JS) 클론코딩 #3.3~#3.5

#3 JS로 브라우저에 HTML과 상호작용하기

이벤트

• event : console.dir 통해 요소 객체의 안을 살펴보면 on으로 시작하는 것들 있음.
  • 클릭할 때, 마우스 올릴 때, 입력 끝낼 때, 이름 적을 때, 엔터 누를 때, 와이파이 해제될 때 등.
  • object.addEventListener("event") : 이런 모든 이벤트들을 자바스트립트가 감지할 수 있음.
• click 이벤트
  • 클릭했을 때 동작할 요소를 선택함.
    • const title = document.querySelector("div.hello:first-chile h1");
  • 실행할 동작을 함수로 정의해줌.
    • function handleTitleClick() {
         console.log("title was clicked");
      }
  • 이 함수를 이벤트 감지 함수의 두번째 인자로 전달.
    • title.addEventListener("click", handleTitleClick);
    • 자바스크립트에 함수 이름을 넘겨줘서 사람이 직접 () 써서 실행하지 않고, 유저가 클릭할 때 자바스크립트가 대신 실행버튼을 누를 수 있게 함.
• event 찾기
  • "h1 html element mdn" 검색 > "Web APIs" 적힌 페이지 접속 : html element에 대한 내용 중 event.
  • console.dir : 쭉 보면 "on"으로 시작하는 property가 event listener.
• mouse 관련 event 
  • mouseenter : 요소 위에 마우스가 올라가고 클릭은 하지 않은 상태.
  • mouseleave : 마우스가 올라왔다가 떠날 때
• 이벤트 감지하는 또 다른 방법 : on이벤트명 property에 event listener 할당
  • title.addEventListener("click", handleTitleClick);
    → title.onclick = handleTitleClick;
  • addEventListener의 장점 : removeEventListener 통해 event listner 제거 가능.
• html 요소 말고 window 관련 이벤트
  • resize
    • function handleWindowResize() {
             document.body.style.backgroundColor = "tomato";
           }
      window.addEventListener("resize", handleWindowResize);
    • document처럼 window도 기본 제공되는(?) 객체
    • document.body : document에서 가져올 수 있는 것들 중 하나. body는 특별해서 바로 호출 가능. 마찬가지로 document.title의 title은 변수 이름으로 사용한 "title"이 아니라 html 코드 내의 <title>.
  • wifi : offline, online
    • [문제] 랜선 연결해놔서 테스트 불가
  • 클립보드 : copy(복사했을 때)