[자바14]JavaScript와 HTML 6

event 내부를 살펴보고, event를 listening하는 다른 방법 배우기

• title.addEventListener()을 해주고, click을 넘겨주는 것, 하지만 이걸 title.onClick() 이런식으로 바꿀 수 있습니다.
• addEventListener을 더 선호하는 이유는, 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문입니다.

Window로 다시 돌아가서 window의 event를 listen해보도록 하겠습니다!

• devicemotion이란, 여러분의 모바일이 움직이거나 할 때 발생하는 event입니다.

resize해보기

• window.은 기본적으로 제공합니다. 마치 document가 JavaScript에서 기본적으로 제공되듯이.
• 여기서 body부분이 중요한데, html의 h1처럼 document를 밑으로 가져올 수는 없습니다.
• 우리가 만약 document.title을 호출하면 js의 title이 출력되는 것이 아니라 html의 title을 가져오는 것입니다.

헷갈리는 것을 방지하기 위해서 const title 부분을 h1으로 바꾸도록 하겠습니다.(이미 바꿔서 코드 작성함)

• h1은 document.title이랑은 다르다!

우리는 window element의 resize event를 listen하고 있고, 만약 이 event가 실행되면 handleWindowResize가 실행될거고, 그리고 이 handleWindowResize function은 body의 backgroundColor를 변경할 것입니다.

실행 된 결과를 보시죠!

토마토 색으로 변경 완료!

console창에 document.body를 입력하면 배경색도 tomato로 변경된 것이 확인 가능합니다.

다른 Event도 가져와 해보겠습니다.

• Clipboard event : 해당 event는 유저가 copy 행위를 했을 때 발생합니다.
  
  

command+c 또는 ctrl+c를 했더니 동작한 것을 볼 수 있습니다.

• 이처럼 우리가 원하는 어떤 event들을 다 가져와 할 수 있다는 것을 알 수 있죠!

wifi event 해보기

• 우리가 wiif에 연결되어 있는지 브라우저가 알 수 있는 것입니다.

(사실 이건 귀찮은 코드라서 실행하기는 싫었지만.. 보여드리기 위해 해봤습니다..)

노트북의 와이파이 연결을 끊으면 SOS no WIFI라는 alert창이 뜨고

노트북의 와이파이 연결을 하면 ALL GOOD 이라는 alert창이 뜨게 됩니다.

다른 엄청난 많은 Event들도 적용할 수 있지만 극소수의 Event들을 해보았습니다! 끝!