반응형
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);'javascript' 카테고리의 다른 글
| 10. Momentum 만들기 1 - 시간 출력 (0) | 2020.06.25 |
|---|---|
| 9. if문(조건문) (0) | 2020.06.24 |
| 7. DOM 변경 (0) | 2020.06.24 |
| 6. Function() (0) | 2020.06.24 |
| 5. Object (0) | 2020.06.23 |