728x90
[자바스크립트 / Javascript] 브라우저 윈도우 창 종료 이벤트
beforeunload와 unload 차이와 사용 예제
웹 로드시 이벤트
window.addEventListener('load', 콜백함수);
DOM 요소 로드시 이벤트
window.addEventListener('DOMContentLoaded', 콜백함수);
웹 브러우저 윈도우 창 종료 직전 이벤트
window.addEventListener('beforeunload', 콜백함수);
웹 브라우저 윈도우 창 종료 이벤트
window.addEventListener('unload', 콜백함수);
샘플 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>윈도우 실행 / 종료 이벤트</title>
<style>
.beforeunload {
color : red;
font-size : 30px;
}
.unload {
color : blue;
font-size : 30px;
}
</style>
</head>
<body>
<div class="beforeunload"></div>
<div class="unload"></div>
<script>
window.addEventListener('DOMContentLoaded',e=>console.log('DOM 요소 로드 완료 이벤트 발생!'));
window.addEventListener('load',e=>console.log('모든 요소 로드 완료 이벤트 발생!'));
window.addEventListener('beforeunload',e=>document.querySelector('.beforeunload').innerHTML = '브라우저 종료 전 이벤트 발생!');
window.addEventListener('unload',e=>document.querySelector('.unload').innerHTML = '브라우저 종료 이벤트 발생!');
</script>
</body>
</html>
출력 결과
ps. unload는 종료해야 생기는 이벤트 이므로
console.log에 출력되지 않는 것을 알수 있다
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 원하는 엘리먼트로 스크롤 이동 Element.scrollIntoView() (0) | 2021.05.23 |
|---|---|
| [Javascript] 마우스 이벤트 mouse event (0) | 2021.05.21 |
| [Javascript] script 태그 안에 defer란? (0) | 2021.05.21 |
| [FrontEnd / Javascript] 스크롤 이동 ScrollBy ScrollTo (0) | 2021.05.21 |
| [프론트 엔드 / 자바스크립트] 좌표 값 구하기 (e.pageX / Y , e.clientX / Y ) (0) | 2021.05.21 |
댓글