Events
**
- js 파일이 있기 때문에, js를 통해 html의 내용을 가져올 수 있다.
- document가 html이 js파일을 load하기 때문에 존재
- element의 내부를 보고 싶으면
console.dir()
--> 기본적으로 object 로 표시한 element를 보여줌
--> 그 element 중, 앞에 'on'이 붙은 것들이 "event".
**
- 모든 event는 js가 listen할 수 있다.
- eventListener
event를 listen함 -> js에게 어떤 event를 listen하고 싶은지 알려줘야 함.
const title = document.querySelector("div.hello:first-child h1");
// title을 click하는 것을 listen함 -> 무언가를 해줘야 함
title.addEventListener("click");
const title = document.querySelector("div.hello:first-child h1");
function handleTitleClick() {
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);
// click하면 handleTitleClick이라는 function이 동작하기를 원함.
// 그래서 handleTitleClick 함수에 () 를 넣지 않은 것.
// 즉, js가 대신 실행시켜주기를 바라는 것.
* 함수에서 () 이 두 괄호를 추가함으로써 실행버튼을 누를 수 있음.
** listen하고 싶은 event를 찾는 방법
- google -> ex) h1 html element mdn 검색
-> Web APIs 포함된 페이지 찾기 (js관점의 HTML Heading Element 라는 의미)
- console.dir();
-> on... 으로 시작되는 것이 events !!
**
- document의 body head, title은 중요
--> document.body.style... 가능.
--> 나머지 element들(h1, div, ...)은 querySelector or getElementById로 불러와야함.
title.onClick = handleMouseEnter;
title.addEventListener("mouseenter", handleMouseEnter);
// 위 두 코드는 동일
// 밑에 코드를 더 선호 <-- removeEnterListner 을 통해 제거 가능.
**
- window 는 기본제공
