Events

• 이벤트는 javascript의 오브젝트라고 생각하면 된다
• 이런 오브젝트들로는 style 이라는 친구도 있다

title.style.color = "blue";

하면 글씨의 색깔이 파란색으로 바뀐다

(1) eventListener

=> event를 듣는 놈
=> 자바스크립트에게 무슨 이벤트를 리슨하고 싶은건지 알려줘야 함

• 모든 이벤트에 대해 알고 싶은게 아닌 하나의 이벤트만 알고싶기 때문

• title.addEventListener

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

function handleTitleClick(){
	console.log("title was clicked);
    }

title.addEventListener("click", handleTitleClick);

• 원래 handleTitleClick() 이렇게하면 자동적으로 실행하는 건데

• title.addEventListener("이벤트를 실행시킬 동작", "동작 들어오면 실행할 함수"); //여기의 함수 자리에 함수를 넣으며 도작이 들어올 때 실행되는 것

• 이때 주의해야할 것은 이 괄호안에 함수를 넣을 때는

이벤트 실행시키기 위해선
HTML element 데리고와서 addEventListener 함수를 실행시켜주면 됨

title.addEventListener("click", 실행시킬함수이름);

• 클릭 자리에 이벤트를 넣는 것, 이벤트 매우 多
• 주의 사항은 실행시킬 함수이름 뒤에 () 넣으면 안돼

(2) More Events

• Events types

• 이벤트를 실행시키는 다양한 방식
  (1) title.addEventListener("click", handleTitleClick);
  ==title.onclick=handleTitleClick;

=> 근데 addEventListener로 수행한 아이들은 편리한 것이
나중에 .removeEventListener 을 통해 이벤트 제거가 가능

(2) window.addEventListener("resize", handleWindowResize);

function handleWindowResize(){
	document.body.style.backgroundColor="rose");}

(3) wifi events

• user가 copy를 했을 때

window.addEventListener("copy", handleWindowListener);

주의사항
document의 head,title,body 는 중요하기 때문에
document.body.style~ 은 허용되고
h1이나 div 같은 것들은 호출이 안되서
querySelcetor나 getElementByID로 호출해야 함