More Events

이벤트를 작성하는 방법

이벤트를 작성하는 방법은 두 가지인데, addEventListener을 사용해야 나중에 removeEventListener를 통해서 event listener를 제거할 수 있다.

 

위의 title은 html element였고, 이제 window에 대해 이야기 해보자

JS에서 document를 기본적으로 제공하듯이, window도 기본적으로 제공한다.

 

화면을 resize하는 함수를 추가했다.

만약 document에서 body가 아닌 title을 호출했다면, 그것은 아래의 title이 아닌 html의 <title>태그에 해당한다는 점을 알아두자

title.addEventListener에서 title은 h1 태그를 의미한다.

document.title 에서 title에 해당하는 것은 아래의 것이다.

html의 title 태그

헷갈림을 방지하기 위해 h1태그를 가리키는 title을 그냥 h1으로 변경했다.

title -&gt; h1 으로 변경한 모습

 

이제 이 화면을 실행해보면, 화면의 사이즈를 조절했을 때 배경 색상이 변경되는 것을 확인할 수 있다.

화면을 실행한 직후

화면의 사이즈를 변경했을 때

 

이번에는 화면에서 복사(ctrl+c)를 했을 때 alert창이 뜨게하는 함수를 추가해 보았다.

이를 저장하고 실행해보면, 화면에서 ctrl+c를 눌렀을 때 alert창이 뜨는 것을 확인할 수 있다.

ctrl+c 를 누르자 alert창이 뜨는 모습

 

이번에는 우리가 wifi에 연결되었는지의 여부를(online or offline) 브라우저가 알려주는 함수를 추가해 보았다.

이제 이 화면을 실행해보면, wifi의 연결 여부를 확인할 수 있다.

wifi 연결을 끊었을 때

wifi를 다시 연결했을 때