Como adicionar um evento onload a uma div

Neste artigo você vai aprender a como adicionar um evento onload a uma div, faremos isso de maneira simples!

Fala programador(a), beleza? Bora aprender mais sobre eventos de DOM!

Adicionar um evento “onload” em uma div é uma tarefa simples e pode ser feita usando JavaScript. O evento “onload” é acionado quando o conteúdo da div é carregado completamente.

Isso é útil para executar uma ação específica, como mostrar uma animação ou adicionar conteúdo dinamicamente.

Existem duas maneiras de adicionar um evento “onload” em uma div: usando a propriedade “onload” da div ou usando o método “addEventListener”.

Usando a propriedade “onload” da div:

<div id="minhaDiv" onload="minhaFuncao()"></div>
<script>
function minhaFuncao() {
  console.log("Div carregada!");
}
</script>

Usando o método “addEventListener”:

<div id="minhaDiv"></div>
<script>
const minhaDiv = document.getElementById("minhaDiv");
minhaDiv.addEventListener("load", minhaFuncao);

function minhaFuncao() {
  console.log("Div carregada!");
}
</script>

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 118 aulas
• 4 projetos
• 9h 33min

Conhecer formação

Em ambos os exemplos, a função “minhaFuncao” será chamada quando a div for carregada.

Você pode colocar qualquer código JavaScript dentro da função para executar a ação desejada.

Lembre-se de que é importante especificar o id da div correta, para que o evento seja adicionado à div desejada.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Em conclusão, adicionar um evento “onload” em uma div é uma tarefa fácil e útil com JavaScript. Isso permite executar uma ação específica assim que o conteúdo da div é carregado completamente.

Existem duas maneiras de fazer isso: usando a propriedade “onload” da div ou usando o método “addEventListener”.

Ambos os métodos são simples de usar e garantem que a ação desejada seja executada assim que a div for carregada. Lembre-se de especificar o id da div correta para garantir que o evento seja adicionado à div desejada.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Como usar o addEventListener com o evento load:

O addEventListener é o jeito mais flexível de escutar evento em JavaScript

A lógica é sempre a mesma: tu escolhe QUEM escuta, QUAL evento e O QUE fazer quando ele acontecer

elemento.addEventListener("load", minhaFuncao)

Se você já usou onclick direto no HTML, aqui é bem parecido, só que muito mais organizado

Com a propriedade onload você só consegue UMA função: se atribuir outra depois, ela atropela a primeira

Já com addEventListener dá pra registrar vários ouvintes no mesmo evento, e todos rodam, sem um cancelar o outro

E tem dois truques que ajudam bastante no dia a dia:

const minhaDiv = document.getElementById("minhaDiv")

// roda só uma vez e se remove sozinho minhaDiv.addEventListener("load", minhaFuncao, { once: true })

// removendo o ouvinte na mão minhaDiv.removeEventListener("load", minhaFuncao)

Repara que no removeEventListener tu precisa passar a MESMA referência de função

Se você usar uma arrow function anônima na hora de adicionar, não tem como remover depois, porque não existe nome pra apontar

Já me ferrei uma vez tentando remover um listener assim haha

E se nada acontecer quando a div carregar?

Esse é o ponto que mais pega gente de surpresa, então se liga nisso

O evento load foi pensado pra quem realmente CARREGA algo de fora: a janela (window), uma imagem, um iframe, um script, uma folha de estilo

Uma div sozinha não busca recurso nenhum na rede, ela só existe no HTML

Então, se você colocou o ouvinte na div e o console ficou mudo, não é bug seu: é o elemento que não tem o que carregar

O caminho prático nesses casos é escutar quem carrega de verdade

Se a div tem uma imagem dentro, escuta a imagem:

<div id="minhaDiv"> <img id="minhaImagem" src="foto.jpg" alt="foto"> </div>

<script> const imagem = document.getElementById("minhaImagem")

imagem.addEventListener("load", function () { console.log("Imagem da div carregada!") }) </script>

Se o que você quer é rodar o código quando o HTML da página já estiver montado, o caminho é o DOMContentLoaded

E se você precisa esperar TUDO (imagens, iframes e companhia), aí é o load na window

Tome cuidado com um detalhe: se a imagem já estiver em cache, ela pode terminar de carregar antes do seu script rodar, e o listener nunca dispara

Pra isso existe a propriedade complete da imagem, que te diz se ela já acabou de carregar antes de você começar a escutar

load ou DOMContentLoaded? Qual usar:

Os dois esperam algo, mas esperam coisas diferentes, e isso muda o resultado do seu código

O DOMContentLoaded dispara assim que o HTML foi lido e a árvore de elementos está montada

É o que você quer na maioria das vezes: pegar elementos, colocar cliques, montar a tela

document.addEventListener("DOMContentLoaded", function () { console.log("HTML pronto, já dá pra mexer nos elementos") })

Já o load na window espera a página inteira, com imagens, iframes e o resto dos recursos

window.addEventListener("load", function () { console.log("Tudo carregado mesmo") })

Uma analogia que ajuda: o DOMContentLoaded é a casa construída, o load é a casa construída E mobiliada

Se o seu código só precisa dos elementos, vai de DOMContentLoaded, porque ele acontece antes e a tela responde mais rápido

Se você depende do tamanho real de uma imagem, por exemplo, aí sim vale esperar o load

Perguntas frequentes sobre o evento load:

Qual a diferença entre onload e addEventListener?

A propriedade onload aceita uma função só: atribuiu outra, a anterior some

O addEventListener registra quantos ouvintes você quiser pro mesmo evento, e ainda aceita opções como o { once: true }

Como executar um código quando a página terminar de carregar?

Use window.addEventListener("load", suaFuncao) pra esperar a página completa, ou document.addEventListener("DOMContentLoaded", suaFuncao) pra rodar assim que os elementos existirem

Por que meu evento load não dispara?

O load é disparado por quem carrega recurso externo, tipo imagem, iframe, script e a própria janela

Se você prendeu o ouvinte num elemento que não carrega nada de fora, ele fica em silêncio mesmo

Como fazer a função rodar uma vez só?

Passa a opção { once: true } no terceiro parâmetro do addEventListener, e o próprio navegador remove o ouvinte depois da primeira execução

Dá pra usar o addEventListener em vários elementos de uma vez?

Dá sim: pega os elementos com querySelectorAll e roda um forEach adicionando o ouvinte em cada um