Resumo : neste tutorial, você aprenderá sobre os eventos relacionados ao carregamento da página, incluindo DOMContentLoaded, load, beforeunloade unload.
Visão geral dos eventos de carregamento de página JavaScript
Ao abrir uma página, os seguintes eventos ocorrem em sequência:
DOMContentLoaded– o navegador carregou totalmente o HTML e concluiu a construção da árvore DOM. No entanto, não carregou recursos externos como folhas de estilo e imagens. Neste caso, você pode começar a selecionar nós DOM ou inicializar a interface.load– o navegador carregou totalmente o HTML e também recursos externos como imagens e folhas de estilo.
Quando você sai da página, os seguintes eventos são acionados em sequência:
beforeunload– dispara antes que a página e os recursos sejam descarregados. Você pode usar este evento para mostrar uma caixa de diálogo de confirmação para confirmar se você realmente deseja sair da página. Ao fazer isso, você pode evitar a perda de dados caso preencha um formulário e clique acidentalmente em um link para navegar para outra página.unload– dispara quando a página é completamente descarregada. Você pode usar esse evento para enviar dados analíticos ou limpar recursos.
Tratamento de eventos de carregamento de página JavaScript
Para lidar com os eventos da página, você pode chamar o addEventListener()método no documentobjeto:
document.addEventListener('DOMContentLoaded',() => {
// handle DOMContentLoaded event
});
document.addEventListener('load',() => {
// handle load event
});
document.addEventListener('beforeunload',() => {
// handle beforeunload event
});
document.addEventListener('unload',() => {
// handle unload event
});
Linguagem de código: JavaScript ( javascript )O exemplo a seguir ilustra como lidar com os eventos de carregamento da página:
<!DOCTYPE html>
<html>
<head>
<title>JS Page Load Events</title>
</head>
<body>
<script>
addEventListener('DOMContentLoaded', (event) => {
console.log('The DOM is fully loaded.');
});
addEventListener('load', (event) => {
console.log('The page is fully loaded.');
});
addEventListener('beforeunload', (event) => {
// show the confirmation dialog
event.preventDefault();
// Google Chrome requires returnValue to be set.
event.returnValue = '';
});
addEventListener('unload', (event) => {
// send analytic data
});
</script>
</body>
</html>Linguagem de código: HTML, XML ( xml )
Anterior
Próximo
