목차
1. 전체 화면 변경 이벤트
fullscreenchange 이벤트는 요소가 전체 화면 모드에 들어가거나 나올 때 발생하는 브라우저 이벤트입니다. 이는 전체 화면 상태의 변경 사항을 감지하는 방법을 제공하며 전체 화면 모드에서 적절한 작업을 수행하거나 사용자 인터페이스를 업데이트하는 데 사용할 수 있습니다.
fullscreenchange 이벤트는 사용자가 전체 화면 기능을 사용하여 브라우저 창을 전체 화면 모드로 전환하거나(예: F11 키 누르기) 전체 화면 모드를 호출하여 지정된 요소를 전체 화면 모드로 전환할 때 트리거됩니다. JavaScript를 통한 화면 API(예: requestFullscreen()).
동시에 사용자가 전체 화면 모드를 종료하거나 전체 화면 모드에서 요소를 종료하기 위해 JavaScript를 통해 전체 화면 API를 호출하면 fullscreenchange 이벤트도 트리거됩니다.
샘플 코드는 다음과 같습니다.
document.addEventListener("fullscreenchange", function(event) {
if (document.fullscreenElement) {
// 元素进入全屏模式
console.log("进入全屏模式");
// 执行相应的操作或更新界面
} else {
// 元素退出全屏模式
console.log("退出全屏模式");
// 执行相应的操作或更新界面
}
});
2. 페이지 숨기기 이벤트
'pagehide' 이벤트는 페이지가 숨겨졌을 때 실행되는 브라우저 이벤트입니다. 이는 페이지 언로드 프로세스의 일부이며 사용자가 현재 탭을 떠나거나 브라우저를 닫을 때 트리거됩니다. 'pagehide' 이벤트를 수신하면 사용자가 페이지를 떠날 때를 포착하고 적절한 작업을 수행할 수 있습니다.
`pagehide` 이벤트는 `unload` 이벤트와 유사하지만 몇 가지 차이점이 있습니다. 주요 차이점은 'pagehide' 이벤트가 취소 가능한 이벤트라는 것입니다. 즉, 이벤트의 기본 동작을 취소하여 페이지가 숨겨지는 것을 방지할 수 있습니다. 반면, `unload` 이벤트는 취소할 수 없으며, 페이지 언로드를 방지할 수 없습니다.
다음은 `pagehide` 이벤트를 사용하는 기본 흐름입니다.
1. `addEventListener` 메소드를 사용하여 `pagehide` 이벤트를 `window` 객체 또는 `document` 객체에 바인딩합니다.
2. 이벤트 핸들러에서는 저장되지 않은 데이터 저장, 통계 정보 전송 등 페이지가 숨겨져 있을 때 수행해야 하는 작업을 수행할 수 있습니다.
3. 페이지가 숨겨지는 것을 방지하려면 이벤트 객체의 `preventDefault()` 메서드를 호출하면 됩니다.
샘플 코드는 다음과 같습니다.
window.addEventListener("pagehide", function(event) {
// 执行页面隐藏时的操作
console.log("页面即将隐藏");
// 如果需要阻止页面的隐藏，取消事件的默认行为
event.preventDefault();
});
'pagehide' 이벤트가 발생할 때 페이지가 숨겨져 있으므로 이벤트 핸들러에서 수행되는 작업은 사용자 경험에 영향을 미치지 않도록 가벼워야 합니다.
'pagehide' 이벤트를 사용하면 사용자가 페이지를 떠나기 전의 순간을 포착하고 필요한 경우 적절한 조치를 취할 수 있습니다. 이는 데이터 저장, 리소스 정리, 통계 전송 등에 유용합니다.
3. 페이지쇼 이벤트
'pageshow' 이벤트는 페이지가 표시될 때 실행되는 브라우저 이벤트입니다. 이는 페이지 로드 및 표시 프로세스의 일부이며 사용자가 새 탭을 열거나 현재 탭으로 다시 이동하거나 페이지를 새로 고칠 때 트리거됩니다. 'pageshow' 이벤트는 표시되는 페이지의 타이밍을 캡처하고 해당 작업을 수행하는 방법을 제공합니다.
`pageshow` 이벤트는 페이지가 완전히 로드되거나 DOMContentLoaded 이벤트가 실행될 때가 아니라 페이지가 표시될 때 실행된다는 점에서 `DOMContentLoaded` 및 `load` 이벤트와 다릅니다.
다음은 `pageshow` 이벤트를 사용하는 기본 흐름입니다.
1. `addEventListener` 메소드를 사용하여 `pageshow` 이벤트를 `window` 객체 또는 `document` 객체에 바인딩합니다.
2. 이벤트 핸들러에서는 상태 복원, 데이터 로드 등 페이지가 표시될 때 수행해야 하는 작업을 수행할 수 있습니다.
샘플 코드는 다음과 같습니다.
window.addEventListener("pageshow", function(event) {
// 执行页面展示时的操作
console.log("页面已展示");
});
페이지를 새로 고칠 때 'pageshow' 이벤트도 발생한다는 점에 유의하세요. 따라서 이벤트 핸들러에서 수행되는 작업은 페이지를 새로 고칠 때 제대로 작동하도록 반복 가능해야 합니다.
'pageshow' 이벤트를 사용하면 페이지가 표시되는 순간을 포착하고 적절한 작업을 수행할 수 있습니다. 이는 상태 복원, 데이터 로드 또는 페이지 표시와 관련된 기타 작업을 수행하는 데 유용합니다.
4. 해시체인지 이벤트
`hashchange` 이벤트는 URL의 조각 식별자(예: 해시 값)가 변경될 때 실행되는 브라우저 이벤트입니다. 조각 식별자는 `#` 기호 뒤에 오는 URL의 일부입니다. 'hashchange' 이벤트는 해시 값이 변경될 때 적절한 작업이 수행될 수 있도록 URL 해시 값의 변경 사항을 수신하는 방법을 제공합니다.
웹 애플리케이션에서 URL 조각 식별자는 프런트엔드 라우팅이나 페이지 상태 관리를 구현하는 데 자주 사용됩니다. 'hashchange' 이벤트는 사용자가 페이지 내의 링크를 클릭하거나 URL의 해시 값을 변경하는 다른 작업을 수행할 때 트리거됩니다.
다음은 `hashchange` 이벤트를 사용하는 기본 흐름입니다.
1. `addEventListener` 메소드를 사용하여 `hashchange` 이벤트를 `window` 객체에 바인딩합니다.
2. 이벤트 핸들러에서는 `location.hash` 속성을 통해 현재 해시 값을 가져오고 해당 작업을 수행할 수 있습니다.
샘플 코드는 다음과 같습니다.
window.addEventListener("hashchange", function(event) {
// 获取当前的哈希值
var newHash = location.hash;
// 执行相应的操作，例如根据哈希值加载不同的内容或触发前端路由逻辑
console.log("哈希值发生变化：" + newHash);
});
'hashchange' 이벤트를 수신하면 URL 해시 값의 변경 사항을 실시간으로 얻을 수 있으며 필요에 따라 페이지 콘텐츠 업데이트, 보기 전환, 프런트엔드 라우팅 탐색 수행 등 해당 작업을 수행할 수 있습니다.
'hashchange' 이벤트는 URL 해시 값의 변경 사항만 모니터링할 수 있고 다른 URL(예: 프로토콜, 도메인 이름, 경로 등)의 변경 사항은 모니터링할 수 없다는 점에 유의해야 합니다. 전체 URL의 변경 사항을 수신하려면 'popstate' 이벤트와 History API를 사용할 수 있습니다.
5. 온라인 이벤트
'온라인' 이벤트는 기기의 네트워크 연결 상태가 오프라인에서 온라인으로 변경될 때 트리거되는 브라우저 이벤트입니다. 장치의 네트워크 연결 상태를 감지하고 장치가 네트워크에 다시 연결될 때 적절한 조치를 수행하는 데 사용됩니다.
장치가 오프라인(네트워크 연결 없음)일 때 네트워크 연결이 복원되면 브라우저는 'online' 이벤트를 트리거하여 장치가 네트워크에 다시 연결되었음을 JavaScript 코드에 알립니다.
'온라인' 이벤트를 사용하는 기본 흐름은 다음과 같습니다.
1. `addEventListener` 메소드를 사용하여 `online` 이벤트를 `window` 객체에 바인딩합니다.
2. 이벤트 핸들러에서는 데이터 로드, 요청 전송 등 장치가 네트워크에 다시 연결될 때 수행해야 하는 작업을 수행할 수 있습니다.
샘플 코드는 다음과 같습니다.
window.addEventListener("online", function(event) {
// 设备已重新连接到网络
console.log("设备已在线");
});
'온라인' 이벤트를 청취하면 기기가 네트워크에 다시 연결될 때 기회를 포착하고 적절한 조치를 취할 수 있습니다. 이는 오프라인 상태에서 데이터를 캐싱하거나 장치가 네트워크에 다시 연결되었음을 사용자에게 알리는 데 유용합니다.
'온라인' 이벤트는 장치의 상태가 오프라인에서 온라인으로 변경되는 것만 감지할 수 있으며 장치가 온라인 상태인지 여부는 감지할 수 없다는 점에 유의해야 합니다. 장치의 온라인 상태를 감지해야 하는 경우 `navigator.onLine` 속성을 사용할 수 있습니다. 'navigator.onLine'이 'true'이면 기기가 현재 온라인 상태임을 의미하고, 'false'이면 기기가 현재 오프라인 상태임을 의미합니다.
6. 오프라인 이벤트
'오프라인' 이벤트는 기기의 네트워크 연결 상태가 온라인에서 오프라인으로 변경될 때 트리거되는 브라우저 이벤트입니다. 장치의 네트워크 연결 상태를 감지하고 장치가 네트워크에서 연결이 끊길 때 적절한 조치를 수행하는 데 사용됩니다.
장치가 온라인(네트워크 연결 포함)일 때 네트워크 연결이 중단되면 브라우저는 '오프라인' 이벤트를 트리거하여 장치가 오프라인임을 JavaScript 코드에 알립니다.
다음은 `오프라인` 이벤트를 사용하는 기본 흐름입니다.
1. `addEventListener` 메소드를 사용하여 `offline` 이벤트를 `window` 객체에 바인딩합니다.
2. 이벤트 핸들러에서는 오프라인 상태 프롬프트 표시, 데이터 업로드 일시 중지 등 장치의 네트워크 연결이 끊어질 때 수행해야 하는 작업을 수행할 수 있습니다.
샘플 코드는 다음과 같습니다.
window.addEventListener("offline", function(event) {
// 设备已离线
console.log("设备已离线");
});
'오프라인' 이벤트를 수신하면 기기가 네트워크에서 연결이 끊어졌을 때 기회를 포착하고 적절한 조치를 수행할 수 있습니다. 이는 데이터를 오프라인으로 처리해야 하거나 장치가 네트워크에서 연결 해제되었음을 사용자에게 경고해야 하는 경우 유용합니다.
'오프라인' 이벤트는 장치의 온라인에서 오프라인으로의 상태 변경만 감지할 수 있으며 장치가 오프라인 상태인지 여부는 감지할 수 없다는 점에 유의해야 합니다. 장치의 온라인 상태를 감지해야 하는 경우 `navigator.onLine` 속성을 사용할 수 있습니다. 'navigator.onLine'이 'true'이면 기기가 현재 온라인 상태임을 의미하고, 'false'이면 기기가 현재 오프라인 상태임을 의미합니다.
7. 팝스테이트 이벤트
`popstate` 이벤트는 브라우저의 기록(즉, `history.pushState()` 또는 `history.replaceState()`를 통해 수정된 URL)이 변경될 때 트리거되는 JavaScript의 브라우저 이벤트입니다.
일반적으로 사용자가 브라우저의 앞으로 또는 뒤로 버튼을 클릭하거나 `history.back()`, `history.forward()`, `history.go()` 메서드가 JavaScript를 통해 호출되어 변경할 히스토리 `popstate` 이벤트.
'popstate' 이벤트는 브라우저의 기록이 변경될 때 개발자가 작업을 수행할 수 있는 기회를 제공합니다. 예를 들어 'popstate' 이벤트를 사용하여 페이지 콘텐츠를 업데이트하거나, 데이터를 새로 고치거나, URL 변경과 관련된 기타 작업을 수행할 수 있습니다.
다음은 `popstate` 이벤트를 사용하는 기본 흐름입니다.
1. `addEventListener` 메소드를 사용하여 `popstate` 이벤트를 `window` 객체에 바인딩합니다.
2. 이벤트 핸들러에서는 필요에 따라 URL 변경과 관련된 작업을 수행할 수 있습니다.
샘플 코드는 다음과 같습니다.
window.addEventListener("popstate", function(event) {
// 历史记录发生变化
console.log("历史记录变化");
// 执行其他操作，如更新页面内容或刷新数据
});
페이지가 처음 로드될 때 `popstate` 이벤트가 시작되지 않는다는 점에 유의하세요. 이 이벤트는 페이지가 로드되고 기록 변경이 발생한 경우에만 시작됩니다.
또한 `history.pushState()`, `history.replaceState()` 또는 브라우저의 앞으로/뒤로 버튼을 호출하여 기록을 수정하고 `popstate` 이벤트를 트리거할 수 있습니다. 그러나 무한 루프가 발생하지 않도록 `popstate` 이벤트 핸들러에서 이러한 메서드를 다시 호출하지 않도록 주의하세요.
8. 장치 모션 이벤트
'devicemotion' 이벤트는 기기의 물리적 동작 상태가 변경될 때 트리거되는 JavaScript의 기기 이벤트입니다. 이 이벤트는 장치의 가속도, 회전율 등 관련 정보를 제공하며, 장치의 모션 상태를 감지하는 데 사용됩니다.
기기가 흔들리거나, 회전하거나, 모바일 기기에서 기기를 기울이는 등의 기타 물리적 동작이 발생하거나, 회전되면, 브라우저는 'devicemotion' 이벤트를 생성하고 관련 데이터를 이벤트 핸들러에 전달합니다.
`devicemotion` 이벤트 객체에는 다음 속성이 포함되어 있습니다.
- `가속도`: 기기의 가속도를 나타내며 3차원 좌표 형태로 표현됩니다. 즉 `{x:숫자, y:숫자, z:숫자}`입니다.
- `accelerationIncludeGravity` : 중력 가속도를 포함한 전체 가속도를 3차원 좌표로 표현합니다.
- `rotationRate`: 기기의 회전율을 나타내며 3차원 좌표로 표현됩니다. 즉 `{알파:숫자, 베타:숫자, 감마:숫자 }`입니다.
- `간격`: `devicemotion` 이벤트 생성 사이의 시간 간격을 나타냅니다.
다음은 `devicemotion` 이벤트를 사용하는 기본 흐름입니다.
1. `addEventListener` 메소드를 사용하여 `devicemotion` 이벤트를 `window` 객체에 바인딩합니다.
2. 이벤트 핸들러에서는 `event.acceleration`, `event.accelerationInclusiveGravity`, `event.rotationRate` 등의 속성을 통해 기기의 가속도, 회전율 등의 정보를 얻고 해당 작업을 수행할 수 있습니다.
샘플 코드는 다음과 같습니다.
window.addEventListener("devicemotion", function(event) {
// 获取设备的加速度信息
var acceleration = event.acceleration;
var accelerationIncludingGravity = event.accelerationIncludingGravity;
// 获取设备的旋转速率信息
var rotationRate = event.rotationRate;
// 执行其他操作，如根据加速度进行某些动作或旋转等
});
'devicemotion' 이벤트는 자주 트리거될 수 있으며 특정 트리거 빈도는 장치 및 브라우저 구현에 따라 다릅니다. 이벤트를 처리할 때 너무 자주 트리거되어 성능에 영향을 미치는 것을 방지하기 위해 필요에 따라 조절하거나 필터링하는 적절한 방법을 선택할 수 있습니다.
또한 'devicemotion' 이벤트를 사용하려면 장치 지원 및 사용자 인증이 필요합니다. 모바일 장치에서 사용자는 일반적으로 브라우저가 장치의 모션 센서에 액세스하도록 허용해야 합니다.
9. 장치 방향 이벤트
`deviceorientation` 이벤트는 기기의 방향이 변경될 때 트리거되는 JavaScript의 기기 이벤트입니다. 이 이벤트는 기기의 기울기, 회전, 방위각을 포함한 기기의 방향 정보를 제공합니다.
기기 방향을 변경하거나 휴대기기에서 기기를 회전하는 등 기기가 회전하거나 기울거나 방향이 변경되면 브라우저는 'deviceorientation' 이벤트를 생성하고 관련 데이터를 이벤트 핸들러에 전달합니다.
`deviceorientation` 이벤트 객체에는 다음 속성이 포함되어 있습니다.
- `알파`: z축을 기준으로 기기의 회전 각도를 나타내며 범위는 0~360도입니다.
- `베타`: x축을 기준으로 기기의 기울기 각도를 나타냅니다(-180~180도 범위).
- `감마`: y축을 기준으로 기기의 기울기 각도를 나타냅니다(-90~90도 범위).
- `absolute`: 기기 방향 정보가 절대값인지 여부를 나타냅니다. 'true'이면 절대적인 방향정보를 제공한다는 의미이고, 'false'이면 상대방향 정보를 제공한다는 의미이다.
다음은 `deviceorientation` 이벤트를 사용하는 기본 흐름입니다.
1. `addEventListener` 메소드를 사용하여 `deviceorientation` 이벤트를 `window` 객체에 바인딩합니다.
2. 이벤트 핸들러에서는 'event.alpha', 'event.beta', 'event.gamma' 등의 속성을 통해 장치의 방향 정보를 얻고 해당 작업을 수행할 수 있습니다.
샘플 코드는 다음과 같습니다.
window.addEventListener("deviceorientation", function(event) {
// 获取设备的方向信息
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// 执行其他操作，如根据方向信息调整页面布局或进行相应的动作等
});
'deviceorientation' 이벤트는 자주 트리거될 수 있으며 구체적인 트리거 빈도는 기기 및 브라우저 구현에 따라 다릅니다. 이벤트를 처리할 때 너무 자주 트리거되어 성능에 영향을 미치는 것을 방지하기 위해 필요에 따라 조절하거나 필터링하는 적절한 방법을 선택할 수 있습니다.
또한 'deviceorientation' 이벤트를 사용하려면 기기 지원 및 사용자 인증이 필요합니다. 모바일 장치에서 사용자는 일반적으로 브라우저가 장치의 방향 센서에 액세스하도록 허용해야 합니다.