Melhor prática para usar window.onload

Eu desenvolvo sites / componentes / módulos e plugins do Joomla e de vez em quando eu preciso da habilidade de usar JavaScript que aciona um evento quando a página é carregada. Na maioria das vezes isso é feito usando a function window.onload .

Minha pergunta é:

  1. Essa é a melhor maneira de acionar events JavaScript no carregamento da página ou há uma maneira melhor / mais recente?
  2. Se esta é a única maneira de acionar um evento no carregamento da página, qual é a melhor maneira de garantir que vários events possam ser executados por diferentes scripts?

window.onload = function(){}; funciona, mas como você deve ter notado, ele permite que você especifique apenas 1 ouvinte .

Eu diria que a melhor / mais recente maneira de fazer isso seria usar uma estrutura, ou apenas para usar uma implementação simples dos methods nativos addEventListener e attachEvent (para IE), que permite remover os ouvintes dos events como bem.

Aqui está uma implementação entre navegadores:

 // Cross-browser implementation of element.addEventListener() function listen(evnt, elem, func) { if (elem.addEventListener) // W3C DOM elem.addEventListener(evnt,func,false); else if (elem.attachEvent) { // IE DOM var r = elem.attachEvent("on"+evnt, func); return r; } else window.alert('I\'m sorry Dave, I\'m afraid I can\'t do that.'); } // Use: listen("event name", elem, func); 

Para o caso de window.onload, use: listen("load", window, function() { });


EDITAR Gostaria de expandir minha resposta adicionando informações preciosas que foram apontadas por outras pessoas.

Trata-se do DOMContentLoaded ( DOMContentLoaded Mozilla, Opera e webkit atualmente suportam isso) e dos events onreadystatechange (para IE) que podem ser aplicados ao object documento para entender quando o documento está disponível para ser manipulado (sem esperar por todas as imagens / stylesheets etc .. para ser carregado).

Existem muitas implementações “hacky” para suporte a vários navegadores, então sugiro fortemente usar uma estrutura para esse recurso.

Os events window.onload são substituídos em várias criações. Para acrescentar funções, use o window.addEventListener (padrão W3C) ou o window.attachEvent (para o IE). Use o seguinte código que funcionou.

 if (window.addEventListener) // W3C standard { window.addEventListener('load', myFunction, false); // NB **not** 'onload' } else if (window.attachEvent) // Microsoft { window.attachEvent('onload', myFunction); } 

Os frameworks javascript modernos introduziram a ideia de um evento “documento pronto”. Este é um evento que será triggersdo quando o documento estiver pronto para que as manipulações de DOM sejam executadas nele. O evento “onload” é ​​acionado somente após TUDO na página ter sido carregado.

Juntamente com o evento “documento pronto”, as estruturas forneceram uma maneira de enfileirar vários bits de código e funções JavaScript para serem executados quando o evento é triggersdo.

Portanto, se você se opuser aos frameworks, a melhor maneira de fazer isso é implementar sua própria fila de documentos.onload.

Se você não se opõe a frameworks, então você vai querer olhar para jQuery e document.ready , Prototype e dom: loaded , Dojo e addOnLoad ou Google para [seu framework] e “document ready” ,.

Se você não escolheu um framework, mas está interessado, o jQuery é um bom lugar para começar. Ele não altera nenhuma das principais funcionalidades do Javascript e geralmente fica fora do seu caminho e permite que você faça as coisas que quiser quando quiser.

O Joomla vem com o MooTools, então você achará mais fácil usar a biblioteca do MooTools para seu código adicional. O MooTools é enviado com um evento personalizado chamado domready que é acionado quando a página é carregada e a tree de documentos é analisada.

 window.addEvent( domready, function() { code to execute on load here } ); 

Mais informações sobre a MooTools podem ser encontradas aqui . O Joomla 1.5 atualmente vem com o MT1.1, enquanto o Joomla 1.6 alpha includeá o MT1.2.

Pessoalmente, eu prefiro este método . Não só permite que você tenha múltiplas funções onload , mas se algum script o definiu antes de você chegar a ele, este método é bom o suficiente para lidar com isso … O único problema que resta é se uma página carrega vários scripts que não use a function window.addLoad() ; mas esse é o problema deles :).

PS Também é ótimo se você quiser “encadear” mais funções mais tarde.

Este é o caminho sujo, mas mais curto: P

 function load(){ *code* } window[ addEventListener ? 'addEventListener' : 'attachEvent' ] ( addEventListener ? 'load' : 'onload', function(){} ) 

Como sempre incluo arquivos JS do jQuery / bootstrap na parte inferior do documento e não tenho access ao $ sobre o documento, desenvolvi um pequeno plug-in “init” que é um e apenas script JS que incluo no topo das minhas páginas:

 window.init = new function() { var list = []; this.push = function(callback) { if (typeof window.jQuery !== "undefined") { callback(); } else { list.push(callback); } }; this.run = function() { if (typeof window.jQuery !== "undefined") { for(var i in list) { try { list[i](); } catch (ex) { console.error(ex); } } list = []; } }; if (window.addEventListener) { window.addEventListener("load", this.run, false); } else if (window.attachEvent) { window.attachEvent("onload", this.run); } else { if (window.onload && window.onload !== this.run) { this.push(window.onload); } window.onload = this.run; } }; 

Usando isso eu posso definir qualquer carregador anônimo sobre a página, antes da inclusão do jQuery e bootstrap e ter certeza de que ele irá triggersr assim que o jQuery estiver presente:

 init.push(function() { $('[name="date"]').datepicker({ endDate: '0d', format: 'yyyy-mm-dd', autoclose: true }).on('hide', function() { // $.ajax }); $('[name="keyword_id"]').select2(); });