Event & Event handler

이벤트와 이벤트핸들러

Event & Event handler

Event란? 웹 사이트에서 발생 하는 것들 (click, resize, submit...)

JavaScript는 이벤트를 중간에 가로챌 수 있음

querySelector!

예시 1) 윈도우 창의 Resize 이벤트

const title = document.querySelector("#title");

function handleResize(){
    console.log("I have been resized");
}

window.addEventListener("resize", handleResize); 
//중요!! 윈도우 사이즈가 변경 될 때! 그럴 때, handleResize 호출하자!
//() 쓰지 않는 것이 좋음 / 함수를 바로 즉시 호출하지 않는다는 의미!

//window.addEventListener("resize", handleResize());
//자동 호출

addEventListener() : 지정한 이벤트가 대상에 적용 됐을 때, 호출할 함수를 설정하여 실행시켜 줌

target(대상) : Element, Document, Window...

예시2) 윈도우 창의 event 매개변수

• event 매개변수는 JavaScript로 부터 온 것

• 이벤트를 다룰 함수를 만들 때마다, JavaScript는 자동적으로 함수를 객체에 붙여줌

• 이벤트가 발생할 때마다 이벤트 객체가 호출

• 폼을 만들거나 링크를 클릭할 때 유용함

const title = document.querySelector("#title");

function handleResize(event){
    console.log(event);
}

window.addEventListener("resize", handleResize); 

예시 3) title의 Click 이벤트

const title = document.querySelector("#title");

function handleClick(){
    title.style.color = "red";
}

title.addEventListener("click", handleClick);
//title을 클릭하면 글자의 색상이 red로 변경됨