A execução da linguagem de script JavaScript precisa ser acionada. A abordagem geral é escrever várias funções diretamente na página da web. Alguns deles são processados pelo navegador quando o código é carregado ou use códigos semelhantes aos seguintes para acionar a implementação das funções relacionadas à função.
<div id = ”link” onclick = ”fun ()”> </div>
O código acima significa que, quando o mouse clica em um elemento com ID como link, seu evento onclick é acionado e, em seguida, a função divertida definida usando JavaScript é executada. Essa abordagem é definitivamente irracional, porque a operação do gatilho é diretamente gravada na estrutura HTML, e o conteúdo e o comportamento não são isolados, o que causará inconvenientes ao desenvolvimento ou modificações secundárias futuras.
Deve -se notar que, quando o processamento de eventos está ligado ao elemento correspondente, as operações só podem ser executadas após o carregamento do elemento. Se o script processado for colocado na área da cabeça, o navegador relatará um erro. Como o seguinte elemento HTML ainda não foi carregado, o script de processamento na cabeça foi processado.
Uma boa maneira de executar o código JavaScript deve ser separar o conteúdo comportamental e processá -lo após o carregamento da página. Portanto, ao lidar com o código JavaScript, precisamos usar os eventos de carga de ouvintes e objetos de janela.
Ouvinte
A função real do ouvinte é separar o comportamento do conteúdo. No passado, eram necessários alguns eventos desencadeadores para desencadear funções relacionadas ao JavaScript. Agora, usamos diretamente um ouvinte para um elemento em JavaScript para ouvir os eventos desse elemento. Se esse elemento for acionado e a função de processamento correspondente para este evento for definida no ouvinte, essa função será processada.
O método padrão do W3C é chamado AddEventListener, que é suportado pelo IE9, Chrome, Firefox e Opera. O método de escrita é:
Window.AddeventListener ('Load', função, false);O método anexado no início do IE tem efeitos semelhantes:
window.attachevent ('Onload', função);O método de usar um ouvinte também é muito simples. É primeiro obter um elemento na página e depois usar um ouvinte para esse elemento definir o evento ouvido e a função de manuseio de eventos correspondente. Por exemplo acima:
document.getElementById ('link'). addEventListener ('clique', diversão, false);Para obter instruções mais detalhadas sobre o uso do monitor, consulte as informações suplementares no final do artigo.
Evento de Window.onload
O evento OnLoad será acionado apenas quando a página inteira estiver totalmente carregada. Quando escrevemos o código JavaScript no evento OnLoad, podemos garantir que o navegador processe nosso código JavaScript após o carregamento do elemento HTML. Escrita básica:
window.onload = function () {// code}Dessa forma, o código nesta função será processado após o carregamento. No entanto, esse método tem uma desvantagem, que é que ele só pode ser usado para esta função. Vários eventos de Window.onload não podem aparecer na página. Se houver vários eventos de Onload, o conteúdo subsequente substituirá o anterior.
Em seguida, podemos fazer isso, escrever todos os nomes de funções que precisam ser carregados em uma janela.
window.onload = function () {func1 (); func2 (); } função func1 () {…} função func2 () {…}Embora esteja tudo bem, é muito inconveniente porque precisamos escrever todos os nomes de funções a serem carregados e será muito problemático modificar. Claro, deve haver uma solução. O JQuery fornece um método de carregamento multi-script muito poderoso; portanto, deve haver uma solução para JavaScript nativo.
Window.onload lida com várias funções simultaneamente
Precisamos escrever uma função de processamento e olhar primeiro o código:
função addLoadListener (fn) {if (typeof window.addeventListener! = 'indefinida') {window.addeventListener ('load', fn, false); } else if (typeof document.addeventListener! = 'indefinido') {document.addeventListener ('load', fn, false); } else if (typeof window.attachevent! = 'indefinido') {window.attachevent ('onLload', fn); } else {var Oldfn = window.onload; if (typeof window.onload! = 'function') {window.onload = fn; } else {window.onload = function () {Oldfn (); fn (); }; }}}Vamos simplesmente analisar essa função AddListener personalizada, passando um nome de função como um parâmetro. Primeiro, determina se o navegador suporta o ouvinte relevante. Se ele suportar o ouvinte, ele usa o ouvinte para ouvir eventos onload do objeto da janela e lida com essa função. Este código usa a instrução IF para julgar os eventos de escuta de todos os navegadores e é compatível com o navegador.
Colocamos esse código na parte superior do segmento de código JavaScript e, em seguida, definimos as funções relevantes abaixo e, em seguida, usamos a seguinte instrução para carregar a função JavaScript.
addLoadListener (func); function func () {…}Dessa forma, quaisquer funções de JavaScript precisam ser processadas após o carregamento da página. Você pode usar a função AddListener diretamente e várias funções podem ser usadas. De um modo geral, é melhor carregar todo o JavaScript usando o evento OnLoad para evitar situações inesperadas.