바닐라 JS로 크롬앱 만들기 #3.3~#3.6

#3.3 Events

 

이벤트(event)

이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurrence)인데, 이는 여러분이 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. 예를 들자면, 만약 유저가 웹페이지에 있는 버튼을 고른다면, 여러분은 그 사건에 인포메이션 박스를 표시함으로써 응답하기를 원할지도 모릅니다.

 

이벤트 리스너(event listener)

각각의 이용가능한 이벤트들은 이벤트 핸들러(event handler)를 가지고 있는데, 이는 이벤트가 발생되면 실행되는 코드 블럭 (보통 여러분과 같은 프로그래머가 만드는 JavaScript 함수)입니다. 그러한 코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 우리는 이벤트 핸들러를 등록(register)했다고 말합니다.

 

(출처 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events)

 

▶title을 click하는 event를 Javascript가 감지하게 하는 방법

 

1) HTML element를 Javascript로 가지고 온다.

2) title에 eventListener를 추가한다. 

 

function handleTitleClick(){

  console.log("title was clicked!");

}

 title.addEventListener("click", handleTitleClick);

 

▶종합

const title = document.getElementById("title");

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

함수 설명

 

function handleTitleClick(){
  console.log("title was clicked!");
}
title.addEventListener("click", handleTitleClick);

//(가져올 HTML element).addEventListener("liten할 event", event가 listen되었을 때 실행하고 싶은 function);

#3.4 Events part Two

 

listen 하고싶은 event를 찾는 방법

1) 구글링

  ☞"element의 이름" HTML element MDN

 

2) console창에서 찾기

 

 

on이 붙은 것이 event property이다. 사용할 때는 on을 떼고.

 

const title = document.getElementById("title");


function handleTitleClick(){
    title.style.color = "blue";
  }
 
   
function handleMouseEnter(){
    title.innerText = "mouse is here!"
}


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

    title.addEventListener("click", handleTitleClick);
    title.addEventListener("mouseenter", handleMouseEnter)
    title.addEventListener("mouseleave", handleMouseLeave)

#3.5 more Events

 

eventname property에 event listener를 할당함으로써 event를 listen할 수 있다.

 

event를 사용하는 방법 

(1) title.addEventListener() 를 해주고, click를 넘겨주는 것

      .removeEventListener 를 통해 event listener를 지울 수 있다. (nicolas의 선호이유)

(1) title.onClick = handleTitleClick; //click했을 때 실행시킬 function 이름 

 

resize

 

function handleWindowResize(){

    document.body.style.backgroundColor = "tomato";

}

window.addEventListener("resize", handleWindowResize);

 

등등 위와 같이 

 

"window api event mdn" 로 검색 했을 때 

window창에 발생시킬 어떠한 event의 이름을 보고 여러가지 event linstener를 발생시킬 수 있다.

 

#3.6 CSS in Javascript

 

currentColor에 h1.style.color의 값을 담음 

newColor 라는 빈 let변수 선언

함수를 거치면서 newColor에 값을 할당받게 됨

h1.style.color값에 할당받은 newColor의 값을 할당하게 됨

click이라는 event를 listen함 

handleTitleClick함수가 실행됨

 

const h1 = document.getElementById("title");

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