자바스크립트 (12) - 이벤트

우리가 자바스크립트를 통해 html 내용을 가져올 수 있는건, html에 app.js를 삽입하는 내용이 들어있기 때문임.

 

쿼리셀렉터를 사용하면 css 선택자를 활용한 모든 검색이 가능함.

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

console.dir(title)

 

엘리먼트의 내부룰 보고싶으면 console.dir

 

엘리먼트 내부에서 가장 중요한건 style 프로퍼티임. 콘솔창 style 옆 화살표를 누르면 element의 style 을 볼 수 있는데 javascript 형식임. 

 

만약 엘리먼트 내부의 스타일태그에 접근하려면 어떻게 해야할까?

 

먼저 h1태그를 찾아야하고 그안에 있는 style 프로퍼티를 찾아야함. 

그니까 title.style.color를 찾으면 됨.

 

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

 

console.dir(title)

 

title.style.color = "blue";

 

이게 자스가 강한이유.

 

하지만 자스에서 대부분 작업들은 event 들을 listen 하는 것임. 

 

이벤트란 뭘까? 클릭하는게 이벤트임. h1위로 마우스가 올라가도 이벤트임. 내가 입력을 끝내거나, 이름을 적거나 엔터누르거나 등이 이벤트임. 와이파이에서 해재되는것도 이벤트이고 자스는 모두 listen 할 수 있음. 

 

 

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

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

 

title.addEventListener()

말그대로 이벤트를 감시한다.

첫번쨰 인자로 어떤 종류의 이벤트를 감시할 것인지 적어준다. 

이제 title을 클릭하는지 감시한다. 두번쨰 인자로는 실행 함수를 적어준다.

적어준 함수에는 괄호를 넣지 않고 함수명만 넣었다. 전달과정에서 실행되는 불상사를 막기위해서 . 

이제 이벤트가 감지된다면 자동으로 listner가 함수를 실행해준다.

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

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