초보자를 위한 바닐라 자바스크립트 #2-4 Events and event handlers

 

https://www.youtube.com/watch?v=LnuLDGO5848&t=26s 

자바스크립트는 단지 html과 css를 바꾸고 싶어서 만들어지진 않았습니다

 

자바스크립트는 이벤트에 반응하기 위해서 만들어 졌습니다

 

무슨 이벤트냐 하면 웹사이트에서 발생하는 것들을 말합니다

 

js

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

function handleResize(){
    console.log("I habe been resize")
}


window.addEventListener("resize", handleResize)
// handleResize는 handleResize()이렇게 안써도 됩니다 handleResize 이렇게 적어야 합니다
// 이게 매우 중요합니다 마지막줄 window.addEventListener("resize", *여기 들어가는것을 말함*)

만약 handleResize() 이렇게 적었을시에

 

지금 바로 호출 하라는 것입니다

 

윈도우 사이즈가 변경 될때마다 알려주는 코드 입니다

 

js

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

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


window.addEventListener("resize", handleResize)

이렇게 적을시에 콘솔로고에 이렇게 나옵니다

 

우리가 폼을 만들때는 유용합니다

 

혹은 링크를 클릭할때 유용합니다

 

js

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

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


title.addEventListener("click", handleClick);

클릭하면 글씨색을 바뀌게해주는 코드 입니다