Índice
1. DOMContentLoaded: acionado quando o documento HTML inicial é totalmente carregado e analisado.
4. descarregar: acionado após o descarregamento da janela ou moldura.
5. redimensionar: Acionado quando a janela ou moldura é redimensionada.
6. scroll: Acionado quando a barra de rolagem rola.
JavaScript fornece vários eventos relacionados à janela (janela do navegador) que podem ser usados para detectar e responder ao status e às operações da janela.
1. DOMContentLoaded: acionado quando o documento HTML inicial é totalmente carregado e analisado.
O evento DOMContentLoaded é acionado após o documento HTML ter sido completamente carregado e analisado, ou seja, a árvore DOM é construída e todos os elementos HTML estão acessíveis. O cenário de uso desse evento geralmente é executar operações de inicialização, vincular manipuladores de eventos ou executar outras operações relacionadas ao DOM após o carregamento da página.
Aqui está um exemplo simples que mostra como usar o evento DOMContentLoaded para realizar algumas operações de inicialização:
<!DOCTYPE html>
<html>
<head>
<title>DOM Content Loaded Example</title>
<script>
document.addEventListener('DOMContentLoaded', function(event) {
// DOM内容加载完成后执行的操作
var heading = document.querySelector('h1');
heading.style.color = 'blue';
heading.textContent = 'DOM Content Loaded';
});
</script>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
No exemplo acima, o ouvinte de evento DOMContentLoaded será acionado após o carregamento do conteúdo DOM e, em seguida, modificará o conteúdo de texto do elemento h1 na página para "Conteúdo DOM carregado" e definirá sua cor como azul. Esta operação será realizada imediatamente quando a página carregar, sem esperar o carregamento de todos os recursos (como imagens).
Ao usar o evento DOMContentLoaded, você pode garantir que a estrutura básica do documento esteja em vigor ao lidar com operações relacionadas ao DOM, proporcionando uma melhor experiência ao usuário.
2. Carregar: Acionado quando a página inteira e todos os seus recursos (como imagens e folhas de estilo) completam o carregamento.
O evento load é acionado após o carregamento de toda a página e todos os seus recursos (como imagens, folhas de estilo, scripts, etc.). O cenário de uso desse evento geralmente é realizar algumas operações após o carregamento completo da página, como inicializar o conteúdo da página, vincular manipuladores de eventos ou executar outras tarefas relacionadas à conclusão do carregamento da página.
Aqui está um exemplo simples que mostra como usar o evento load para realizar algumas operações:
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
<script>
window.addEventListener('load', function(event) {
// 页面加载完成后执行的操作
var heading = document.querySelector('h1');
heading.style.color = 'red';
heading.textContent = 'Page Loaded';
});
</script>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
No exemplo acima, o ouvinte do evento load será acionado após o carregamento de toda a página e todos os seus recursos, e então o conteúdo do texto do elemento h1 na página será modificado para "Página carregada" e sua cor será definida para vermelho.
Ao usar o evento load, você pode garantir que todos os recursos da página foram carregados enquanto lida com as tarefas necessárias após a conclusão do carregamento da página, proporcionando uma operação mais completa e confiável.
3. beforeunload: Acionado antes que a janela ou quadro esteja prestes a ser descarregado. Geralmente é usado para solicitar ao usuário se deve sair da página atual.
O evento beforeunload é acionado antes de o usuário sair da página atual. Ele pode ser usado para realizar algumas operações ou fornecer um prompt de confirmação antes que o usuário feche ou saia da página para garantir a intenção do usuário.
Aqui está um exemplo simples que mostra como usar o evento beforeunload para fornecer um prompt de confirmação:
<!DOCTYPE html>
<html>
<head>
<title>Beforeunload Event Example</title>
<script>
window.addEventListener('beforeunload', function(event) {
// 提示用户确认离开页面
event.returnValue = 'Are you sure you want to leave this page?';
});
</script>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
No exemplo acima, o ouvinte de evento beforeunload é acionado antes que o usuário feche ou saia da página, e a propriedade event.returnValue é definida para usar uma string como prompt de confirmação. Quando o usuário tenta fechar ou sair da página, o navegador exibirá uma caixa de diálogo mostrando uma mensagem de aviso e oferecendo a opção de confirmar ou cancelar.
Usando o evento beforeunload, você pode perguntar ao usuário se ele tem certeza antes de fechar ou sair da página para evitar sair acidentalmente ou perder alterações não salvas. Observe que, devido às restrições de segurança do navegador, você não pode realizar operações de bloqueio no evento beforeunload, mas pode exibir um prompt de confirmação ao usuário.
4. descarregar: acionado após o descarregamento da janela ou moldura.
O evento unload é acionado quando o usuário sai da página atual e pode ser usado para realizar algumas operações de limpeza ou fornecer prompts adicionais para garantir que o usuário tenha uma experiência correta no último momento antes de sair da página.
Aqui está um exemplo simples que mostra como usar o evento unload para realizar algumas operações:
<!DOCTYPE html>
<html>
<head>
<title>Unload Event Example</title>
<script>
window.addEventListener('unload', function(event) {
// 执行清理操作或提供额外的提示
alert('Are you sure you want to leave this page?');
});
</script>
</head>
<body>
<h1>Example Heading</h1>
<p>This is an example paragraph.</p>
</body>
</html>
No exemplo acima, o ouvinte de evento unload será acionado quando o usuário sair da página atual e, em seguida, exibirá uma caixa de alerta perguntando ao usuário se ele tem certeza de que deseja sair da página.
Usando o evento unload, você pode executar as ações necessárias antes que o usuário saia da página, como salvar dados do usuário, limpar recursos ou fornecer confirmação adicional. Observe que devido a restrições de segurança do navegador, você não pode realizar operações de bloqueio ou cancelar a navegação no evento de descarregamento, mas pode exibir algumas informações imediatas ao usuário.
5. redimensionar: Acionado quando a janela ou moldura é redimensionada.
O redimensionamento do evento é acionado quando o tamanho da janela é alterado e pode ser usado para responder às alterações no tamanho da janela e executar as operações correspondentes. Este evento normalmente é usado para ajustar o layout da página ou recalcular as dimensões do elemento para acomodar diferentes tamanhos de janela.
Aqui está um exemplo simples que mostra como usar o evento resize para ajustar o layout da página:
<!DOCTYPE html>
<html>
<head>
<title>Resize Event Example</title>
<style>
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
}
.content {
font-size: 24px;
padding: 20px;
background-color: white;
border: 2px solid black;
}
</style>
<script>
window.addEventListener('resize', function() {
// 当窗口大小改变时，调整页面布局
var container = document.querySelector('.container');
var content = document.querySelector('.content');
container.style.height = window.innerHeight + 'px';
content.textContent = 'Window width: ' + window.innerWidth + 'px, height: ' + window.innerHeight + 'px';
});
</script>
</head>
<body>
<div class="container">
<div class="content">Window width: 0px, height: 0px</div>
</div>
</body>
</html>
No exemplo acima, o ouvinte de evento de redimensionamento será acionado quando o tamanho da janela mudar e chamará a função para ajustar o layout da página. Quando o tamanho da janela muda, os elementos do contêiner na página se ajustam ao novo tamanho da janela e atualizam a largura e a altura da janela de exibição.
Usando o evento resize, você pode implementar um layout responsivo para que a página possa se adaptar a janelas de tamanhos diferentes e lidar adequadamente quando o tamanho da janela mudar. Isso é muito útil ao desenvolver páginas ou aplicativos da web responsivos.
6. scroll: Acionado quando a barra de rolagem rola.
O evento scroll é acionado quando a página rola e pode ser usado para ouvir eventos de rolagem de página e executar operações correspondentes. Este evento geralmente é usado para obter efeitos de rolagem, carregamento lento de conteúdo ou monitoramento em tempo real da posição de rolagem.
A seguir está um exemplo simples que mostra como usar o evento scroll para obter efeitos de rolagem:
<!DOCTYPE html>
<html>
<head>
<title>Scroll Event Example</title>
<style>
body {
height: 2000px;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: lightblue;
padding: 20px;
text-align: center;
font-size: 24px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.content {
margin-top: 100px;
text-align: center;
font-size: 18px;
color: gray;
}
</style>
<script>
window.addEventListener('scroll', function() {
// 监听页面滚动事件
var header = document.querySelector('.header');
var content = document.querySelector('.content');
if (window.scrollY > 100) {
// 当滚动超过100像素时，添加特定样式
header.classList.add('scrolled');
content.textContent = 'Scrolling...';
} else {
// 当滚动小于等于100像素时，移除特定样式
header.classList.remove('scrolled');
content.textContent = 'Keep scrolling...';
}
});
</script>
</head>
<body>
<div class="header">
Header
</div>
<div class="content">
Keep scrolling...
</div>
</body>
</html>
No exemplo acima, o ouvinte de evento de rolagem será acionado quando a página for rolada e alterará o estilo dos elementos da página com base na posição de rolagem. Quando a página ultrapassa 100 pixels, um nome de classe específico é adicionado ao elemento de cabeçalho e o conteúdo de texto correspondente é atualizado para exibição.
Ao usar o evento scroll, você pode obter vários efeitos relacionados à rolagem, como barra de navegação fixa, carregamento lento de conteúdo, rolagem infinita, etc. Este evento oferece a capacidade de interagir com a rolagem da página, permitindo acionar diferentes ações e alterações de estilo com base na posição de rolagem.