#2-4 Events and event handlers

 

자바스크립트는 단지 html와 css를 바꾸고 싶어서 만들어지진 않았습니다. 자바스크립트는 이벤트에 반응하기 위해서 만들어 졌어요. 그럼 이벤트란 뭐냐! 이벤트는 웹사이트에서 발생하는 것들을 말하는 겁니다.

click, resize, submit

input change load

before closing printing

같은 것들이요. 모두 이벤트입니다. 좋은 사실은 우리가 이 이벤트를 중간에 가로챌수 있다는 거예요. 예를 들면 window는 조금 다른 이벤트를 가지고 있어요.

 

window.addEventListener("resize")

이제 자바스크립트가 이벤트를 받기를 기다리고 있습니다. 그럼 우리는 분명히 어떤 이벤트인지를 말해 줘야 해요.
모든걸 다 기다리고 싶지는 않거든요. 또 어떤 건 신경 쓸 필요 없거든요! 그게 우리 웹사이트를 매우 느리게 만드니까요.
event listener를 window에 추가하기 위해선 이벤트에서 다룰 함수를 적으면 됩니다.

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

function handleResize() {
	console.log("I have been resized");
    }
    
window.addEventListener("resize", handleResize);

여기서 window resize는 handleResize를 호출합니다. 그리고 , handleResize); 하는 건 여러분이 필요한 시점에 handleResize라는 함수를 호출 하는 겁니다. 만약 ,handleResize()); 라고 한다면 지금 바로 호출 하라는 거예요.


난 이벤트 한개를 듣고 싶어.

여기 트릭이 하나 있어. 보여 줄께

console.log(event); 하게 되면 어떻게 될까요?

event는 자바스크립트로 부터 온 것입니다. 이벤트를 다룰 함수를 만들 때 마다 자바스크립트는 자동적으로 함수를 객체에 붙입니다. 그래서 여러분은 이걸 다룰 준비가 필요해요. 우리가 전에 sayHello 함수를 했던 것과 같이 인자들이 거기 좀 있고, 우린 그걸 다룰 준비가 필요합니다.

우리가 원하든 원하지 않든 자바스크립트는 handleResize 함수를 호출 합니다. 그리고 , handleResize(event)); 이건 event를 호출하고요. 그러면 event가 발생 할때 마다 이벤트 객체가 호출 됩니다.

 

handleClick 이벤트입니다.

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

function handleClick() {
	title.style.color = "red";
    }
    
window.addEventListener("Click", handleClick);

 

 

title은 click이벤트를 기다리고 있어요. 이제 여기서 누군가 타이틀을 클릭 할 때 마다 색깔을 파란색으로 변경하고 싶다면 title.style.color ="red"; 를 넣어줍니다. 그러면 짠 ! 레드 컬러로 바뀝니다. title.style.color = "blue" 로 변경하면 블루 컬러로 바뀌죠. 그런데 클릭! 이벤트는 한번 발생합니다. 즉, 한번 클릭해서 파란색으로 바뀌면 그리고 나서 그냥 그 상태로 머물러 있게 돼요.

다음 글에서 어떻게 블루인지 체크할 수 있는지 배워 볼게요. 이게 블루면 무엇을 하고, 블루가 아니면 무엇을 할지 정해 줄 수 있죠!

고럼 안녕~~!