[노마드코더] 바닐라 JS로 크롬 앱 만들기 #3.3 Events - #3.5 More Events

#3.3 Events

 

• app.js 파일이 있기 때문에 app.js를 통해 html의 내용을 가져올 수 있다.
• • HTML이 app.js를 load하기 때문에 document가 존재하고,
  • 그 다음에 browser가 우리가 document에 접근할 수 있게 해준다.
• console.dir() : element 내부의 object들을 보여준다.
  
  • h1 의 style을 Javascript에서 설정할 수 있다.

const title = document.querySelector("div.hello:first-child h1");

console.dir(title);

title.style.color = "blue";

 

• Event
  
  • Event 예시
    • click
    • h1 위로 마우스가 올라감
    • 입력을 끝낸다.
    • 내 이름을 적거나, enter를 입력하는 것
    • wifi 접속이 해제되는 것
  • 모든 event는 javascript가 listen 가능하다.
    • EventListener를 통해 javascript에게 무슨 event를 listen 하고 싶은 지 알려줄 수 있다.

 

- EventListener 테스트 코드

const title = document.querySelector("div.hello:first-child h1");

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

// 직접 실행버튼을 누르지 않고, Javascript에 function 이름을 넘겨줘서
// user가 title을 click할 경우에, Javascript가 나 대신 실행버튼을 눌러주도록 한다.
title.addEventListener("click", handleTitleClick);

EventListener 테스트

 

 

---

 

#3.4 Events part Two

 

• Listen하고 싶은 event를 찾는 가장 좋은 방법: 
  1. 구글에 찾고 싶은 element의 이름, 예를들어 h1 html element mdn을 검색.
  2. Javascript의 element를 원하기 때문에, Web APIs 페이지를 찾는다.
     • ex) - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement

HTMLElement - Web APIs | MDN

 

 

HTMLElement 에서 사용 가능한 Events

 

 

 

 

• Console.dir 을 통해서도 event 검색 가능
  • console.dir로 element를 입력해 "on"이라는 접미사로 시작하는 것
  • 단, 사용할 때는 on 빼고 사용.

 

 

- 3가지의 separate EventListener 테스트 코드

const title = document.querySelector("div.hello:first-child h1");

console.dir(title);


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


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

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


// 직접 실행버튼을 누르지 않고, Javascript에 function 이름을 넘겨줘서
// user가 title을 click할 경우에, Javascript가 나 대신 실행버튼을 눌러주도록 한다.
title.addEventListener("click", handleTitleClick);

title.addEventListener("mouseenter", handleMouseEnter);

title.addEventListener("mouseleave", handleMouseLeave);

 

 

3가지의 separate EventListener 테스트

 

 

이처럼 Javascript에서 style을 변경할 수는 있지만
style은 CSS를 통해 변경되어야 한다.

 

---

 

#3.5 More Events

 

• 아래 두 코드는 동일하나 addEventListener는 removeEventListener을 통해서 event listener을 제거할수있기 때문에 선호된다.
  • title.onclick = handleMouseEnter;
  • title.addEventListener(“mouseenter” , handleMouseEnter);

handleWindowResize() 테스트

 

 

• document에서 body, head, title 은 중요도가 높아 언제든 document.body와 같은 형식으로 불러오는 것이 가능.
  하지만, div 와 같은 element 들은 querySelector(), getElementById() 로 불러와야 한다.

 

copy Event 테스트

web API

 

- copy EventListener 테스트 코드

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

window.addEventListener("copy", handleWindowCopy);

 

copy(ctl+c) 테스트

 

 

element를 찾아서 event listener를 추가하고, event가 발생하면 반응을 해준다.