window의 interface or object. mdn에서 event 내부를 살펴보고, event를 listening 하는 또 다른 방법을 배워볼 것이다.
우리는 addEventListener()를 통해서 event를 listen할 수도 있고, oneventname property에 event를 listener를 할당함으로써 event를 listen할 수도 있다. 이것은 우리가 이전 영상에서 본 onclick이나 onmouseenter같은 것들과 비슷하다.
event를 사용하는 데에는 두 가지 방법이 있다. 첫 번째는 title.addEventListener()를 해주고, click을 넘겨주는 것이다.
title.addEventListener("click", handleTitleClick);
이것을 다른 식으로 바꿔볼 수도 있다.
title.onClick = handleTitleClick;
똑같이 동작한다! 그러나 addEventListner를 선호하는 이유는, 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문이다.
.removeEventListener
다시 window로 돌아가서, window의 event를 한 번 listen 해 보자!
devicmotion: fired at a regular interval, indicating the amount of physical force of acceleration the device is receiving and the rate of rotation, if availabel. 이건 우리의 모바일이 움직이거나 할 때 발생하는 event다.
resize event.
title은 HTML element이고, 이제 window에 대해 이야기 할 것이다.
function handleWindowResize() {
document.body.style.backgroundColor = "tomato";
}
window.addEventListener("resize", handleWindowResize);
➡️ function에서 body 부분이 꽤 중요하다. h1처럼 document 밑으로 가져올 순 없다. 우리가 만약 documnet.title을 호출하면, 여기에 있는(const의 변수인) 이 title은 아닐 것이다. (<'body> 위에 있는 <'title>Momentum App<'/title> 이 title!) 그래서 기존의 title들을 h1으로 변경! h1은 documnet.title과 다르다.
이제 우리는 event를 하나 더 listen하고 있고, 그건 바로 resize event! 하지만 우리는 h1을 resize할 수 없고, window를 resize할 수 있다. 이제 window element의 resize event를 listen하고 있고, 이 event가 발생한다면, handleWindowResize가 실행될 거고, handleWindowResize function은 body의 backgroundColor를 변경할 것이다. 그리고 우린 console에서 body에 매우 쉽게 접근할 수 있다. console에 document.body 를 입력하면, body 호출 가능!
<'body style="background-color: tomato;">..<'/body>
background-color가 tomato임을 알 수 있다. 우리가 알 수 있는 것은 이게 다이다. 예를 들어 document.div 이런 식으로는 가져올 수 없다. 존재하지 않는다.
document의 body, head, title 이런 것들은 중요하기 때문에 이렇게 존재하는 것이다. 나머지 element들은 querySelector나 getElementById 등으로 찾아와야 한다.
이제 wifi에 관련된 event들을 다뤄보자! (이것은 animation을 위한 것이다.)
그 전에, Clipboard events들을 살펴보자. copy, cut, paste!
function handleWindowCopy() {
alert("copier!");
}
window.addEventListener("copy", handleWindowCopy);
➡️copy를 하면 대화상자가 뜬다!
그리고 여기 보이듯이, 매번 같은 패턴이다. 우린 copy event를 listen 해서 이 event를 처리하는 것이다. (당연히 이것은 h1에서 발생한 event가 아니고 window에서 발생한 event지만, 패턴은 같다!) 이 코드는 계속 패턴이 반복된다. element를 찾아서 event listener를 추가하고, event가 발생하면 반응을 해주는 것이다.
