Events and event handlers

Javascript 는 이벤트를 가로챌수 있음
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Something</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h1 id="title">Javascript 테스트</h1>
    <script src="index.js"></script>
  </body>
</html>

index.js

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

//javascript는 이벤트를 가로챌수 있음
function handleResize() {
    console.log('resize!!!!!!');
}

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

//window객체에서 resize라는 이벤트가 밸상하면 handleResize 함수를 실행하라라는 뜻
//여기서 중요한것은 handleResize() 가 아닌 handleResize를 입력해야함
window.addEventListener('resize', handleResize);

//title을 클릭할때 클릭 이벤트가 발생하면 handleClick()를 실행
title.addEventListener('click', handleClick);

신기한 Event

function handleOffLine() {
    console.log('aaaaaa');
}

function handleOLine() {
    console.log('bbbbb');
}

//인터넷이 offline일때 실행
window.addEventListener('offline', handleOffLine);

//인터넷이 online일때 실행
window.addEventListener('online', handleOLine);