자바스크립트는 왜 쓰이지?
- 이벤트를 발생시키기 위해, 이벤트에 반응하기 위해서 만들어짐.
- 단순히 HTML 이나 CSS 만을 바꾸기 위해 있는 것이 아니다.
웹사이트에서 반응하는 것 (event)
- click
- resize
- submit
- input
- change
- load
- 아마 더 있겠지?
addEventListener
const title = document.querySelector('#title'); // title을 정의해놓음.
window.addEventListener("resize", );- addEventListener: 우리가 여기서는 창에 (window) 혹은 document, html 특정 문서에 이벤트를 받기를 기다리는 것(listen to event)을 의미.
- 자바스크립트는 이벤트 받기를 기다리고 있다.
- document 내의 특정 요소에 event 를 등록할 때 사용한다.
그럼 resize 라는 이벤트를 다룰 함수를 만들자.
이벤트를 다룰 함수 만들기
function handleResize {
console.log("i have been resized");
}이벤트를 다룰 함수 적어서 호출하기
window.addEventListener("resize", handleResize);- window resize 는 handleResize 를 호출한다.
window.addEventListener("resize", handleResize());- 이렇게 하면 handleResize()함수를 즉시, 지금 바로 자동으로 요청하라는 뜻이 되어서, 지금 바로 호출된다. 웹 페이지 상에서 자동적으로 즉시 값을 요청하게 만든다.
하지만 나는 자동적으로 값을 요청하게 되는 것에 거리낀다면,
즉 윈도우 사이즈가 변경될 때, 그럴 떄만 함수를 호출하고 싶은 것이다.
그래서 () 괄호를 빼고 넣는 것이라고 한다.함수를 즉시 바로 호출하지 않는다는 것!
이벤트 한 개 실행하기
-
콘솔로그에서 아무 일도 일어나지 않은 것 같지만, 브라우저 창을 줄이고 늘이며 resize 해보면 resize 이벤트가 발생하고 있는 것을 확인할 수 있다.
-
결과 코드
const title = document.querySelector('#title'); // title을 정의해놓음.
function handleResize {
console.log("i have been resized");
}
window.addEventListener("resize", handleResize);괄호안의 event 는 무엇?
- 괄호안의 event 는 어디에서 왔을까? 자바스크립트로부터 왔다고 한다..
function handleResize(event) {
console.log(event);
}- 이벤트를 다룰 함수를 만들 때마다, 자바스크립트는 자동적으로 함수를 객체에 붙인다.
- 아까 자바스크립트는 handleResize 함수를 호출했다.
handleResize(event) 이러면 event 를 호출한다. - resize 해보면 콘솔창에 event 객체가 발생할 떄마다 이 이벤트 객체가 호출되었다. {}, type:resize
- resize 는 우리가 form 을 만들 때나 링크를 클릭할 때 유용하다.
title 에 click 이벤트 적용하기
const title = document.querySelector('#title'); // title을 정의해놓음.
function handleClick {
title.style.color = "red";
}
title.addEventListener("click", handleClick);- title 은 click event 를 기다리고 있다. 클릭하면 뭐 어쩔? 이런 상태...
- 함수 만들기 : title 을 누를 때 그 색이 빨간색으로 변경되게 하는 함수
- 클릭 해보기 : 오오 title 의 색상이 빨간색으로 바뀌었어! 그런데 원래 색상이였던 검정색으로 돌아가지 않네? 그냥 그 바뀐 상태로 머물러 있네? 클릭 이벤트는 한 번만 발생하는구나 여기서는?
반은 이해하고, 반은 아직도 물음표 상태인 거다..
.