3.3 Events (1)

강의

복습

JS파일이 있기 때문에 JS를 통해 HTML의 내용을 가져올 수 있다. 우리가 JS파일을 import하지 않았다면, document는 여기 존재할 수 없다. 핵심은 document가 HTML이 JS를 load하기 때문에 존재하는 것이다. 그 다음에 브라우저가 document에 접근할 수 있게 해준다.

요소를 알고 싶은게 아니라 내부를 더 정확하게 알고 싶으면 console.log가 아닌 console.dir을 사용하면 된다. object로 표시한 element를 보여줄거다.
콘솔에 출력되는 것들이 전부 JS object라는 것을 이해해야한다.

---

Event

여러 object들을 통해서 굉장히 많은 것들을 할 수 있다. on~으로 시작하는것들이 많은데, 이것들은 event다.
오늘은 이벤트에 대해서 배워보자!

h1 요소에 style이라는 항목(property)이 있는데, JS형식으로 작성되어 있다. style 형식을 바꿔보자.

<div class="hello">
  <h1>Grab me!</h1>
</div>

const title = document.querySelector(".hello h1");
console.dir(title);
title.style.color = "blue";

Grab me! 글자색이 blue 로 변한다.

h1의 style을 JS에서 변경할 수 있다는 거다!! ( •̀ ω •́ )✧
즉, 우리는 JS가 브라우저에서 얼마나 강력한지를 이해해야한다.

우리들이 JS에서 대부분 작업할 일은 event를 listen하는 거다.

로그인을 하는것, 마우스를 올려놓는것, wifi에 접속되는것 등등... 여러 event들을 JS는 listen할 수 있다.

---

addEventListener

우리가 배울건 click event이다!

<div class="hello">
  <h1>Click me!</h1>
</div>

const title = document.querySelector(".hello h1");
function handleTitleClick(){
    console.log("title was clicked!!");
}
title.addEventListener("click",handleTitleClick);

Click me!를 클릭하면 콘솔에 title was clicked!!가 출력된다.

title.addEventListener("이벤트 종류",이벤트가 생겼을때 실행할 함수);

나는 이 함수가 곧 바로 실행되는게 아니라 이벤트가 생겼을때 함수가 실행되길 원한다.
그리고 함수 뒤에 ( )를 안붙이는게 중요하다!! ( )를 실행버튼이라 생각하고, 지금 당장 누르는게 아니라 JS가 대신 눌러주길 바란다고 생각하면 된다.

const title = document.querySelector(".hello h1");
function handleTitleClick(){
    title.style.color = "blue";
}
title.addEventListener("click",handleTitleClick);

클릭하면, 글자색이 blue로 변한다.