JavaScript Event

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

console.log(title);

title.innerText = "Hello";

여기서 이 element의 내부를 보고싶으면?

console.dir(title);

이 안에 있는 모든것들은 자바스크립트의 Event element 들이다!

자자스크립트 오브젝트 내부에 있는 property들긔 값들을 우리는 변경할수 있다고 배웠다.

특정 property들은 변경 할수가 없지만 만약 style object안에 있는 color를 바꾸기위서는 어떻게 해야할까?

 

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

console.dir(title);


title.style.color = "blue";

h1의 스타일을 자바스크립트에서 이렇게 변경할 수 있다!

 

보통 우리가 자바스크립트에서 대부분 작업할 일은 event를 listen을 하는것이다!

What is event???  이벤트란 우리가 클릭하면 이것이 이벤트! , h1위로 마우스 올라가거나 , 내이름 을 적거나 enter을 누르거나 이런것들이 event이다! 

Wifi에 접속이 해제될경우에도 event가 될수있다!

 

 

이번에 우리가 할것은 click을 listen을 해보자!

addEventListener를 추가하게되는데 말그대 event를 listen하는것인데 무슨 event를 listen하고 싶은지 정해야한다!

 

유저가 click할 경우에 JavaScript가 실행버튼을 대신 눌러주길 바랄때 handleTitleClick에 ()괄호를 넣지 않아야한다!

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

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

title.addEventListener("click", handleTitleClick)

결론: 클릭 이벤트를 listen 하기 위해서는 Html element를 가져와서, addEventListner function을 실행시켜 주면된다.

이곳에 어떤 event를 listen 하고싶은지 명시해야한다 ("click")

왜냐하면 모든 이벤트를 리슨하고 싶지는 않으니까

그리고 유저가 이 element에 해당 event를 했을떄 어떤 함수를 실행 할지도 정해야한다!

(handleTitleClick) 이 function의 실행버튼을 눌러선 안된다! 

그저 자바스크립트에 function만을 넘겨주고 자바스크립트가 우리 대신 실행시켜 주기를 원한다

 

---

우리가 listen 하고 싶은 event를 찾는 가장 좋은 방법은?!

 

https://developer.mozilla.org/en-US/docs/Web/API/Element 

Element - Web APIs | MDN

이런곳에서도 찾을수있고 

또한 console.dir(element); 를 통해 콘솔에 출력시킬수 있는데 

많은 property중에 이름 앞에 on이 붙어 있으면 그것이 바로 event listener이다!

사용할때는 on을 빼고 사용해야한다!

---

마우스가 우리의 title위에 올라갈떄 사용할수 있는 event들을 해보려고한다!

 

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

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

function handleMouseEnter() {
    console.log("mouse is here!");
}

title.addEventListener("click", handleTitleClick) 
title.addEventListener("mouseenter", handleMouseEnter)

마우스를 올릴때마다 횟수가 카운트된다!

마우스가 올라갈때 글자가 변경되고 내려갈떄도 변경되고 클릭하면 색깔이 변하는 이벤트를 구현!

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

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가지의 function을 정말 잘조작해주고 있다!