Índice
1. evento de mudança de tela cheia
3. evento de exibição de página
8. evento de movimento do dispositivo
9. evento de orientação de dispositivo
1. evento de mudança de tela cheia
O evento fullscreenchange é um evento do navegador que é acionado quando um elemento entra ou sai do modo de tela inteira. Ele fornece uma maneira de detectar alterações no estado de tela inteira e pode ser usado para executar ações apropriadas ou atualizar a interface do usuário no modo de tela inteira.
O evento fullscreenchange é acionado quando o usuário alterna a janela do navegador para o modo de tela inteira usando a função de tela inteira (por exemplo, pressionando a tecla F11) ou quando o elemento especificado é alternado para o modo de tela inteira chamando o evento fullscreenchange. API de tela (por exemplo, requestFullscreen()) por meio de JavaScript.
Ao mesmo tempo, quando o usuário sai do modo de tela inteira ou chama a API de tela inteira por meio de JavaScript para sair de um elemento do modo de tela inteira, o evento fullscreenchange também será acionado.
O código de exemplo é assim:
document.addEventListener("fullscreenchange", function(event) {
if (document.fullscreenElement) {
// 元素进入全屏模式
console.log("进入全屏模式");
// 执行相应的操作或更新界面
} else {
// 元素退出全屏模式
console.log("退出全屏模式");
// 执行相应的操作或更新界面
}
});
2. Evento de ocultar página
O evento `pagehide` é um evento do navegador que é acionado quando uma página é ocultada. Faz parte do processo de descarregamento da página e é acionado quando o usuário sai da aba atual ou fecha o navegador. Ao ouvir o evento `pagehide`, você pode capturar quando o usuário sai da página e executar as ações apropriadas.
O evento `pagehide` é semelhante ao evento `unload`, mas existem algumas diferenças. A principal diferença é que o evento `pagehide` é um evento cancelável, o que significa que a página pode ser impedida de ser ocultada cancelando o comportamento padrão do evento. Por outro lado, o evento `unload` não pode ser cancelado e o descarregamento da página não pode ser evitado.
A seguir está o fluxo básico de uso do evento `pagehide`:
1. Use o método `addEventListener` para vincular o evento `pagehide` ao objeto `window` ou ao objeto `document`.
2. No manipulador de eventos, você pode realizar operações que precisam ser executadas quando a página está oculta, como salvar dados não salvos, enviar informações estatísticas, etc.
3. Se precisar evitar que a página fique oculta, você pode chamar o método `preventDefault()` do objeto de evento.
O código de exemplo é assim:
window.addEventListener("pagehide", function(event) {
// 执行页面隐藏时的操作
console.log("页面即将隐藏");
// 如果需要阻止页面的隐藏，取消事件的默认行为
event.preventDefault();
});
Deve-se notar que como a página foi ocultada quando ocorre o evento `pagehide`, as operações realizadas no manipulador de eventos devem ser leves para evitar afetar a experiência do usuário.
Ao usar o evento `pagehide`, você pode capturar o momento antes do usuário sair da página e tomar as medidas apropriadas, se necessário. Isso é útil para salvar dados, limpar recursos, enviar estatísticas, etc.
3. evento de exibição de página
O evento `pageshow` é um evento do navegador que é disparado quando uma página é mostrada. Faz parte do processo de carregamento e exibição da página e é acionado quando o usuário abre uma nova guia, navega de volta para a guia atual ou atualiza a página. O evento `pageshow` fornece uma maneira de capturar o tempo de exibição de uma página e realizar as operações correspondentes.
O evento `pageshow` é diferente dos eventos `DOMContentLoaded` e `load` porque ele é acionado quando a página é exibida, não quando a página está totalmente carregada ou quando o evento DOMContentLoaded é acionado.
A seguir está o fluxo básico de uso do evento `pageshow`:
1. Use o método `addEventListener` para vincular o evento `pageshow` ao objeto `window` ou objeto `document`.
2. No manipulador de eventos, você pode realizar operações que precisam ser executadas quando a página é exibida, como restaurar estado, carregar dados, etc.
O código de exemplo é assim:
window.addEventListener("pageshow", function(event) {
// 执行页面展示时的操作
console.log("页面已展示");
});
Deve-se observar que o evento `pageshow` também é acionado quando a página é atualizada. Portanto, as ações executadas no manipulador de eventos devem ser repetíveis para garantir que funcionem corretamente quando a página for atualizada.
Ao usar o evento `pageshow`, você pode capturar o momento em que uma página é exibida e executar as ações apropriadas. Isto é útil para restaurar o estado, carregar dados ou realizar outras operações relacionadas à apresentação da página.
4. Evento de mudança de hash
O evento `hashchange` é um evento do navegador que é disparado quando o identificador do fragmento da URL (ou seja, valor hash) muda. O identificador do fragmento é a parte do URL que segue o símbolo `#`. O evento `hashchange` fornece uma maneira de escutar alterações no valor de hash da URL para que ações apropriadas possam ser executadas quando o valor de hash for alterado.
Em aplicações web, os identificadores de fragmentos de URL são frequentemente usados para implementar roteamento front-end ou gerenciamento de estado de página. O evento `hashchange` é acionado quando o usuário clica em um link dentro da página ou realiza outras operações que fazem com que o valor hash da URL seja alterado.
A seguir está o fluxo básico de uso do evento `hashchange`:
1. Use o método `addEventListener` para vincular o evento `hashchange` ao objeto `window`.
2. No manipulador de eventos, você pode obter o valor do hash atual por meio da propriedade `location.hash` e realizar as operações correspondentes.
O código de exemplo é assim:
window.addEventListener("hashchange", function(event) {
// 获取当前的哈希值
var newHash = location.hash;
// 执行相应的操作，例如根据哈希值加载不同的内容或触发前端路由逻辑
console.log("哈希值发生变化：" + newHash);
});
Ao ouvir o evento `hashchange`, você pode obter alterações no valor de hash da URL em tempo real e realizar as operações correspondentes conforme necessário, como atualizar o conteúdo da página, alternar visualizações ou realizar navegação de roteamento front-end.
Deve-se observar que o evento `hashchange` só pode monitorar alterações no valor de hash da URL, mas não pode monitorar alterações em outras URLs (como protocolo, nome de domínio, caminho, etc.). Para ouvir as alterações em todo o URL, você pode usar o evento `popstate` e a API History.
5. Eventos on-line
O evento `online` é um evento do navegador que é acionado quando o status da conexão de rede do dispositivo muda de offline para online. Ele é usado para detectar o status da conexão de rede do dispositivo e executar ações apropriadas quando o dispositivo se reconectar à rede.
Quando o dispositivo estiver offline (sem conexão de rede), se a conexão de rede for restaurada, o navegador acionará o evento `online` para notificar o código JavaScript de que o dispositivo se reconectou à rede.
A seguir está o fluxo básico de uso de eventos `online`:
1. Use o método `addEventListener` para vincular o evento `online` ao objeto `window`.
2. No manipulador de eventos, você pode realizar operações que precisam ser executadas quando o dispositivo se reconectar à rede, como carregar dados, enviar solicitações, etc.
O código de exemplo é assim:
window.addEventListener("online", function(event) {
// 设备已重新连接到网络
console.log("设备已在线");
});
Ao ouvir o evento `online`, você pode aproveitar a oportunidade quando o dispositivo se reconectar à rede e tomar as ações apropriadas. Isso é útil para armazenar dados em cache enquanto estiver off-line ou para alertar o usuário de que o dispositivo se reconectou à rede.
Deve-se observar que o evento `online` só pode detectar a mudança de status do dispositivo de offline para online e não pode detectar se o dispositivo permanece online. Se precisar detectar o status online do dispositivo, você pode usar a propriedade `navigator.onLine`. Quando `navigator.onLine` for `true`, significa que o dispositivo está online no momento; quando for `false`, significa que o dispositivo está offline no momento.
6. Eventos off-line
O evento `offline` é um evento do navegador que é acionado quando o status da conexão de rede do dispositivo muda de online para offline. Ele é usado para detectar o status da conexão de rede do dispositivo e executar ações apropriadas quando o dispositivo se desconecta da rede.
Quando o dispositivo estiver online (com conexão de rede), se a conexão de rede for interrompida, o navegador irá acionar o evento `offline` para notificar o código JavaScript de que o dispositivo está offline.
A seguir está o fluxo básico de uso do evento `offline`:
1. Use o método `addEventListener` para vincular o evento `offline` ao objeto `window`.
2. No manipulador de eventos, você pode realizar operações que precisam ser executadas quando o dispositivo se desconecta da rede, como exibir prompts de status offline, pausar o upload de dados, etc.
O código de exemplo é assim:
window.addEventListener("offline", function(event) {
// 设备已离线
console.log("设备已离线");
});
Ao ouvir o evento `offline`, você pode capturar a oportunidade quando o dispositivo se desconecta da rede e executar as ações apropriadas. Isto é útil se os dados precisarem ser processados off-line ou para alertar o usuário de que o dispositivo foi desconectado da rede.
Deve-se observar que o evento `offline` só pode detectar a mudança de status do dispositivo de online para offline e não pode detectar se o dispositivo permanece offline. Se precisar detectar o status online do dispositivo, você pode usar a propriedade `navigator.onLine`. Quando `navigator.onLine` for `true`, significa que o dispositivo está online no momento; quando for `false`, significa que o dispositivo está offline no momento.
7. evento popstate
O evento `popstate` é um evento do navegador em JavaScript que é acionado quando o histórico do navegador (ou seja, uma URL modificada por meio de `history.pushState()` ou `history.replaceState()`) muda.
Geralmente, é acionado quando o usuário clica no botão avançar ou voltar do navegador, ou quando os métodos `history.back()`, `history.forward()`, `history.go()` são chamados através de JavaScript para fazer com que o histórico a ser alterado. Evento `popstate`.
O evento `popstate` oferece uma oportunidade para os desenvolvedores realizarem ações quando o histórico do navegador mudar. Por exemplo, você pode usar o evento `popstate` para atualizar o conteúdo da página, atualizar dados ou realizar outras ações relacionadas a alterações de URL.
A seguir está o fluxo básico de uso do evento `popstate`:
1. Use o método `addEventListener` para vincular o evento `popstate` ao objeto `window`.
2. No manipulador de eventos, você pode realizar operações relacionadas a alterações de URL conforme necessário.
O código de exemplo é assim:
window.addEventListener("popstate", function(event) {
// 历史记录发生变化
console.log("历史记录变化");
// 执行其他操作，如更新页面内容或刷新数据
});
Observe que o evento `popstate` não é acionado quando a página é carregada pela primeira vez. Este evento só é acionado quando a página é carregada e ocorre uma alteração no histórico.
Além disso, o histórico pode ser modificado e o evento `popstate` acionado chamando `history.pushState()`, `history.replaceState()` ou os botões avançar/voltar do navegador. No entanto, tenha cuidado para evitar chamar esses métodos novamente no manipulador de eventos `popstate` para evitar causar um loop infinito.
8. evento de movimento do dispositivo
O evento `devicemotion` é um evento de dispositivo em JavaScript que é acionado quando o estado de movimento físico do dispositivo muda. Este evento fornece informações relevantes, como a taxa de aceleração e rotação do dispositivo, e é usado para detectar o status de movimento do dispositivo.
Quando um dispositivo se move, gira ou sofre outro movimento físico, como sacudir, girar ou inclinar o dispositivo em um dispositivo móvel, o navegador gera um evento `devicemotion` e passa dados relevantes para o manipulador de eventos.
O objeto de evento `devicemotion` contém as seguintes propriedades:
- `aceleração`: representa a aceleração do dispositivo, expressa na forma de coordenadas tridimensionais, ou seja `{ x: número, y: número, z: número }`.
- `accelerationIncludingGravity`: Indica a aceleração total incluindo a aceleração da gravidade, expressa em coordenadas tridimensionais.
- `rotationRate`: Indica a taxa de rotação do dispositivo, expressa em coordenadas tridimensionais, ou seja `{ alfa: número, beta: número, gama: número }`.
- `interval`: Indica o intervalo de tempo entre a geração de eventos `devicemotion`.
A seguir está o fluxo básico de uso do evento `devicemotion`:
1. Use o método `addEventListener` para vincular o evento `devicemotion` ao objeto `window`.
2. No manipulador de eventos, você pode obter informações como a taxa de aceleração e rotação do dispositivo por meio de propriedades como `event.acceleration`, `event.accelerationIncludingGravity` e `event.rotationRate`, e realizar as operações correspondentes.
O código de exemplo é assim:
window.addEventListener("devicemotion", function(event) {
// 获取设备的加速度信息
var acceleration = event.acceleration;
var accelerationIncludingGravity = event.accelerationIncludingGravity;
// 获取设备的旋转速率信息
var rotationRate = event.rotationRate;
// 执行其他操作，如根据加速度进行某些动作或旋转等
});
Deve-se observar que o evento `devicemotion` pode ser acionado com frequência, e a frequência específica de acionamento depende do dispositivo e da implementação do navegador. Ao processar eventos, você pode escolher o método apropriado para limitar ou filtrar conforme necessário para evitar acionamentos com muita frequência e afetar o desempenho.
Além disso, o evento `devicemotion` requer suporte do dispositivo e autorização do usuário para ser usado. Em dispositivos móveis, normalmente é necessário que o usuário permita que o navegador acesse os sensores de movimento do dispositivo.
9. evento de orientação de dispositivo
O evento `deviceorientation` é um evento de dispositivo em JavaScript que é acionado quando a orientação do dispositivo muda. Este evento fornece informações de orientação do dispositivo, incluindo inclinação, rotação e azimute do dispositivo.
Quando um dispositivo gira, inclina ou muda de orientação, como alterar a orientação do dispositivo ou girar o dispositivo em um dispositivo móvel, o navegador gera um evento `deviceorientation` e passa os dados relevantes para o manipulador de eventos.
O objeto de evento `deviceorientation` contém as seguintes propriedades:
- `alpha`: Indica o ângulo de rotação do dispositivo em torno do eixo z, variando de 0 a 360 graus.
- `beta`: Indica o ângulo de inclinação do dispositivo em torno do eixo x, variando de -180 a 180 graus.
- `gamma`: Indica o ângulo de inclinação do dispositivo em torno do eixo y, variando de -90 a 90 graus.
- `absoluto`: Indica se a informação de direção do dispositivo é um valor absoluto. Se for `true`, significa que as informações de direção absoluta são fornecidas; se for `false`, significa que as informações de direção relativa são fornecidas.
A seguir está o fluxo básico de uso do evento `deviceorientation`:
1. Use o método `addEventListener` para vincular o evento `deviceorientation` ao objeto `window`.
2. No manipulador de eventos, você pode obter as informações de orientação do dispositivo por meio de propriedades como `event.alpha`, `event.beta` e `event.gamma` e realizar as operações correspondentes.
O código de exemplo é assim:
window.addEventListener("deviceorientation", function(event) {
// 获取设备的方向信息
var alpha = event.alpha;
var beta = event.beta;
var gamma = event.gamma;
// 执行其他操作，如根据方向信息调整页面布局或进行相应的动作等
});
Deve-se observar que o evento `deviceorientation` pode ser acionado com frequência, e a frequência específica de acionamento depende do dispositivo e da implementação do navegador. Ao processar eventos, você pode escolher o método apropriado para limitar ou filtrar conforme necessário para evitar acionamentos com muita frequência e afetar o desempenho.
Além disso, o evento `deviceorientation` requer suporte de dispositivo e autorização do usuário para ser usado. Em dispositivos móveis, normalmente é necessário que o usuário permita que o navegador acesse o sensor de orientação do dispositivo.