window.onload vs

Qual é exatamente a diferença entre o evento window.onload e o evento onload da tag body ? quando eu uso o que e como deve ser feito corretamente?

window.onload = myOnloadFunc e são maneiras diferentes de usar o mesmo evento . Usar o window.onload é menos invasivo – ele remove seu JavaScript do HTML.

Todas as bibliotecas JavaScript comuns, Prototype, ExtJS, Dojo, JQuery, YUI, etc. fornecem wrappers agradáveis ​​em torno de events que ocorrem quando o documento é carregado. Você pode ouvir o evento onLoad da janela e reagir a isso, mas o onLoad não é triggersdo até que todos os resources tenham sido baixados, portanto, o manipulador de events não será executado até que a última imagem grande tenha sido buscada. Em alguns casos, é exatamente isso que você quer, em outros você pode achar que escutar quando o DOM está pronto é mais apropriado – este evento é similar ao onLoad, mas triggers sem esperar que as imagens, etc. sejam baixadas.

Não há diferença, mas você também não deve usar.

Em muitos navegadores, o evento window.onload não é acionado até que todas as imagens sejam carregadas, o que não é o que você deseja. Os navegadores baseados em padrões têm um evento chamado DOMContentLoaded que é acionado anteriormente, mas não é suportado pelo IE (no momento da gravação desta resposta). Eu recomendo usar uma biblioteca javascript que suporte um recurso DOMContentLoaded cross-browser, ou encontrar uma function bem escrita que você possa usar. O jQuery $(document).ready() , é um bom exemplo.

window.onload pode funcionar sem corpo. Crie uma página apenas com as tags de script e abra-a em um navegador. A página não contém nenhum corpo, mas ainda funciona ..

  

Eu prefiro, geralmente, não usar o evento >. Eu acho que é mais limpo manter o comportamento separado do conteúdo, tanto quanto possível.

Dito isto, há ocasiões (geralmente bastante raras para mim) em que usar onload de corpo pode dar um leve aumento de velocidade.

Eu gosto de usar Prototype, então eu geralmente coloco algo assim no > da minha página:

 document.observe("dom:loaded", function(){ alert('The DOM is loaded!'); }); 

ou

 Event.observe(window, 'load', function(){ alert('Window onload'); }); 

O acima são truques que aprendi aqui . Eu gosto muito do conceito de append manipuladores de events fora do HTML.

(Editar para corrigir erro de ortografia no código.)

Não diferença …

Então, principalmente, você poderia usar os dois (um de cada vez!)

Mas por uma questão de legibilidade e de limpeza do código html eu sempre prefiro o window.onload! O]

‘tantas respostas subjetivas para uma questão objetiva. JavaScript “discreto” é superstição como a regra antiga de nunca usar gotos. Escreva o código de uma forma que ajude você a atingir sua meta com segurança, e não de acordo com as crenças religiosas da moda de alguém.

Qualquer um que encontre:

   

distrair demais é excessivamente pretensioso e não tem suas prioridades.

Eu normalmente coloco meu código JavaScript em um arquivo .js separado, mas não vejo nada complicado sobre enganchar manipuladores de events em HTML, que é um HTML válido.

window.onload – Chamado após todos os arquivos DOM, JS, Images, Iframes, Extensions e outros completamente carregados. Isso é igual a $ (window) .load (function () {});

body onload="" – Chamado uma vez DOM carregado. Isso é igual a $ (document) .ready (function () {});

Se você está tentando escrever código JS discreto (e deveria estar), então você não deve usar .

No meu entender, navegadores diferentes lidam com esses dois de maneira um pouco diferente, mas operam de maneira semelhante. Na maioria dos navegadores, se você definir ambos, um deles será ignorado.

Pense em onload como qualquer outro atributo. Em uma checkbox de input, por exemplo, você poderia colocar:

  

Ou você poderia ligar:

 document.getElementById('test1').value = "somethingelse"; 

O atributo onload funciona da mesma maneira, exceto pelo fato de ter uma function como seu valor em vez de uma string como o atributo value. Isso também explica porque você pode “usar apenas um deles” – chamar window.onload reatribui o valor do atributo onload para a tag body.

Além disso, como os outros aqui estão dizendo, normalmente é mais limpo manter o estilo e o javascript separados do conteúdo da página, e é por isso que a maioria das pessoas recomenda usar window.onload ou como a function pronta do jQuery.

deve sobrescrever window.onload.

Com , document.body.onload pode ser nulo, indefinido ou uma function dependendo do navegador (embora getAttribute (“onload”) deva ser algo consistente para obter o corpo da function anônima como uma string) . Com window.onload, quando você atribui uma function a ela, window.onload será uma function consistentemente em todos os navegadores. Se isso é importante para você, use window.onload.

O window.onload é melhor para separar o JS do seu conteúdo de qualquer maneira. Não há muita razão para usar de qualquer maneira quando você pode usar window.onload.

No Opera, o destino do evento para window.onload e

O que isto significa é que, quando isso importa, você deve enrolar o cru e fazer as coisas consistentes ou usar uma biblioteca que faça isso para você.

Ambos funcionam da mesma maneira. No entanto, observe que, se ambos estiverem definidos, apenas um deles será chamado. Eu geralmente evito usar qualquer um deles diretamente. Em vez disso, você pode append um manipulador de events ao evento load. Dessa forma, você pode incorporar mais facilmente outros pacotes JS que também podem precisar append um retorno de chamada ao evento onload.

Qualquer estrutura JS terá methods cross-browser para manipuladores de events.

É um padrão aceito separar conteúdo, layout e comportamento. Então window.onload () será mais adequado para usar que embora ambos façam o mesmo trabalho.

Se você quiser manipular o DOM, use definitivamente . Desta forma, o evento será acionado quando o DOM for carregado. Senão há um atraso entre o evento window.onload e o carregamento do DOM para que você possa acabar manipulando o object que não existe. Eu sugiro usar jquery e o $(document).ready(function(){}) . Isso funcionará para o melhor