JavaScript (Português)

Na programação tradicional, os aplicativos são executados sequencialmente do início para terminar para produzir seus resultados. No entanto, atualmente o modelo predominante é o de programação baseada em eventos. Scripts e programas esperam sem fazer qualquer tarefa até que um evento ocorra. Uma vez produzido, eles executam alguma tarefa associada à aparência desse evento e, quando conclui, o script ou programa retorna ao estado de espera.

javascript permite scripts com os dois métodos de programação: baseado em eventos. Os eventos Javascript permitem a interação entre aplicativos e usuários de JavaScript. Cada vez que um botão é pressionado, ocorre um evento. Cada vez que uma chave é pressionada, um evento também é produzido. No entanto, para ocorrer um evento, não é obrigatório que o usuário intervenha, já que, por exemplo, cada vez que uma página é carregada, um evento também é produzido.

Domingo Nível 1 não inclui especificações relacionadas a Eventos Javascript. Domingo Nível 2 inclui certos aspectos relacionados a eventos e Dom Nível 3 incluem a especificação completa de eventos JavaScript. Infelizmente, a especificação do Dom Nível 3 foi publicada em 2004, mais de dez anos após os primeiros navegadores incluídos eventos.

Por esta razão, muitas das propriedades e métodos atuais relacionados aos eventos são incompatíveis com os do sol . Na verdade, os navegadores como o Explorador do Internet trata os eventos seguindo seu próprio modelo incompatível com o padrão.

O modelo de evento simples foi introduzido na versão 4 do padrão HTML e é considerado parte do nível do dom mais básico. Embora seus recursos sejam limitados, é o único modelo compatível com todos os navegadores e, portanto, o único que permite criar aplicativos que funcionam da mesma maneira em todos os navegadores.

15.1 Tipos de eventos

Cada elemento XHTML tem sua própria lista de eventos possíveis que podem ser atribuídos. O mesmo tipo de evento (por exemplo, clicando no botão esquerdo do mouse) pode ser definido para vários elementos XHTML e o mesmo elemento XHTML pode ter diferentes associados de eventos.

O nome dos eventos é construído através do prefixo on, seguido pelo nome inglês da ação associada ao evento. Assim, o evento para clicar em um elemento com o mouse é chamado onclick e o evento associado ao movimento do mouse é chamado onmousemove.

A tabela a seguir resume os eventos mais importantes definidos por JavaScript:

Os eventos mais usados em aplicativos da Web tradicionais são onload para aguardar a página completo página, eventos onclick, onmouseover, onmouseout para controlar o mouse e onsubmit para controlar o envio do formulários.

Alguns eventos na tabela anterior (onclick, onkeydown, onkeypress, onreset, onsubmit) permite que você evite “ação padrão” desse evento. Mais tarde, esse comportamento é mostrado em detalhes, o que pode ser muito útil em algumas técnicas de programação.

Ações típicas que um usuário executa em uma página da Web pode levar a uma sucessão de eventos. Pressionando por exemplo, em um botão <input type="submit"> eventos são acionados onmousedown, onclick, onmouseup e onsubmit consecutivamente.

15.1.1 Gerentes de eventos

um evento JavaScript por si só falta utilidade. Para que eventos sejam úteis, as funções ou o código JavaScript devem estar associados a cada evento. Desta forma, quando ocorre um evento, o código indicado é executado, portanto, o aplicativo pode responder a qualquer evento que ocorre durante a execução.

Código de funções ou javascript que são definidos para cada evento que são chamados de evento Gerente (manipuladores de eventos em inglês) e como JavaScript é uma linguagem muito flexível, existem várias maneiras diferentes de indicar os manipuladores:

• manipuladores como atributos dos elementos XHTML.
• Manipuladores como funções de javascript externas.
• “semântico” manipuladores.

15.1.1.1 Manipuladores como Atributos XHTML

Este é o método mais simples e menos profissional de indicar o código JavaScript que deve ser executado quando ocorre um evento. Nesse caso, o código está incluído em um atributo do próprio elemento XHTML. No exemplo a seguir, você deseja mostrar uma mensagem quando o usuário perfura com o mouse em um botão:

<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />

neste Método, os atributos XHTML são definidos com o mesmo nome que os eventos que você deseja manipular. O exemplo anterior só quer controlar o evento de picada com o mouse, cujo nome é onclick. Assim, o elemento xhtml para o qual você deseja definir este evento, deve incluir um atributo chamado onclick.

O conteúdo do atributo é uma string de texto contém Todas as instruções do JavaScript que são executadas quando o evento ocorre. Nesse caso, o código JavaScript é muito simples (console.log('Gracias por pinchar');), já que é apenas sobre mostrar uma mensagem.

Neste outro exemplo, quando o usuário clica em No elemento <div> mostra uma mensagem e quando o usuário passa o mouse sobre o elemento, outra mensagem é exibida:

<div onclick="console.log('Has pinchado con el ratón');" onmouseover="console.log('Acabas de pasar el ratón por encima');"> Puedes pinchar sobre este elemento o simplemente pasar el ratón por encima</div>

Este exemplo inclui uma das instruções mais usadas nos aplicativos JavaScript mais antigos:

<body onload="console.log('La página se ha cargado completamente');"> ...</body>

A mensagem anterior é exibida após a página é totalmente carregada, ou seja, após o código HTML ter sido baixada, suas imagens e qualquer outro objeto incluído na página.

O evento onload é um dos mais usados, já que visto no capítulo Dom, as funções que permitem acesso e manipular os nós do Dom Tree estão disponíveis apenas quando a página foi carregada complexa Taricamente.

15.1.1.2 Gerentes de eventos e variável Este

javascript define uma variável especial chamada this que é criado automaticamente e que é emprega em algumas técnicas avançadas de programação. Em eventos, você pode usar a variável this para se referir ao elemento XHTML que causou o evento. Essa variável é muito útil para exemplos como o seguinte:

Quando o usuário passa o mouse sobre o <div>, a cor da borda é mostrada em preto. Quando o mouse deixa a <div>, a borda é mostrada novamente com a cor cinza clara original.

<div style="width:150px; height:60px; border:thin solid silver"> Sección de contenidos...</div>

Se a variável não for usada this, o código necessário para modificar a cor das bordas, seria a seguinte:

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('contenidos').style.borderColor='black';" onmouseout="document.getElementById('contenidos').style.borderColor='silver';"> Sección de contenidos...</div>

O código anterior é muito longo e muito propenso a cometer erros. Dentro do código de um evento, o JavaScript cria automaticamente a variável this, que se refere ao elemento XHTML que causou o evento. Assim, o exemplo anterior pode ser reescrito da seguinte forma:

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';"> Sección de contenidos...</div>

O código anterior é muito mais compacto, mais fácil de ler e escrever e continue a funcionar corretamente mesmo se o valor do atributo ID do <div>.

15.1.1.3 Gerentes de eventos como funções externas

A definição de manipuladores de eventos nos atributos XHTML é um método simples, mas incapazes de lidar com os eventos JavaScript. A principal desvantagem é que é complicado em excesso, logo que algumas instruções forem adicionadas, por isso é recomendado apenas para os casos mais simples.

Quando o código da função de manuseio é mais complexo, como o Validação de um formulário, é aconselhável agrupar todo o código JavaScript em uma função externa que é chamada do código XHTML quando o evento ocorre.

Desta forma, o seguinte exemplo:

<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />

pode ser transformado em:

function muestraMensaje() { console.log('Gracias por pinchar');}

<input type="button" value="Pinchame y verás" onclick="muestraMensaje()" />

em funções externas Não é possível usar a variável this da mesma forma que em os manipuladores inseridos nos atributos xhtml. Portanto, é necessário passar a variável this como um parâmetro para a função de manuseio:

function resalta(elemento) { switch(elemento.style.borderColor) { case 'silver': case 'silver silver silver silver': case '#c0c0c0': elemento.style.borderColor = 'black'; break; case 'black': case 'black black black black': case '#000000': elemento.style.borderColor = 'silver'; break; }}

<div style="padding: .2em; width: 150px; height: 60px; border: thin solid silver" onmouseover="resalta(this)" onmouseout="resalta(this)"> Sección de contenidos...</div>

No exemplo anterior, a função externa é passada no parâmetro this, que Dentro da função é chamado elemento. Ao passar this como parâmetro, é possível acessar diretamente a partir da função externa para as propriedades do elemento que causou o evento.

Por outro lado, o exemplo anterior é complicado pela maneira em que os diferentes navegadores armazenam o valor da propriedade borderColor. Enquanto o Firefox armazena (caso as quatro bordas correspondem a cores) o valor simples black, o Internet Explorer armazena como black black black black e Opera armazena seu hexadecimal Representação #000000.

15.1.1.4 Manipuladores de eventos semânticos

Use os atributos XHTML ou funções externas para adicionar gerentes de eventos tem um inconveniente grave : “Incorporar” o código XHTML da página.

Como é conhecido, ao criar páginas da Web, recomenda-se separar o conteúdo (XHTML) da apresentação (CSS). Tanto quanto possível, também é recomendável separar o conteúdo (XHTML) da programação (JavaScript). Mix Javascript e XHTML complica excessivamente o código-fonte da página, torna sua manutenção difícil e reduz a semântica do documento final produzido.

Felizmente, há um método alternativo para definir os manipuladores de eventos do JavaScript. Essa técnica é atribuir funções externas usando as propriedades DOM dos elementos XHTML. Assim, o seguinte exemplo:

<input type="button" value="Pinchame y verás" onclick="console.log('Gracias por pinchar');" />Se puede transformar en:

<input type="button" value="Pinchame y verás" />

O código XHTML resultante é muito “limpo”, já que não se mistura com o código JavaScript. A técnica de gerentes semânticos consiste em:

1. Atribua um identificador exclusivo ao elemento XHTML usando o atributo ID.
2. Criar uma função JavaScript encarregada de manusear o evento.
3. Atribua a função a um evento específico do elemento XHTML usando Dom.

Outra vantagem adicional desta técnica é que as funções externas podem usar a variável this Referiu o elemento que o evento original.

Atribuir a função de manuseio usando o DOM é um processo que requer uma explicação detalhada. Primeiro, você recebe a referência do elemento ao qual o manipulador será atribuído:

document.getElementById("pinchable");

Em seguida, é atribuído o Função externa para o evento desejado por meio de uma propriedade de elementos com o mesmo nome do evento:

document.getElementById("pinchable").onclick = ...

Finalmente, o externo função. Como já mencionado nos capítulos anteriores, o mais importante (e a causa mais comum de erros) é indicar apenas o nome da função, isto é, dispensar os parênteses atribuindo a função:

Se os parênteses forem adicionados no final, a função está sendo invocada e atribuindo o valor retornado pela função para o evento onclick elemento.

A única desvantagem desse método é que os manipuladores são atribuídos usando as funções DOM, que só podem ser usadas após a página totalmente carregada. Desta forma, para que a atribuição dos manipuladores não seja errônea, é necessário certificar-se de que a página já foi carregada.

Uma das maneiras mais simples para garantir que um determinado código esteja indo para ser executado depois que a página é completamente carregada é usar o evento onload

window.onload = function() { document.getElementById("pinchable").onclick = muestraMensaje;}

A técnica anterior usa uma função anônima para atribuir algumas instruções ao evento onload da página (neste caso, ele foi definido pelo objeto ). Desta forma, para garantir que um determinado código seja executado após a carga ter sido carregada, é necessário incluí-lo dentro da próxima construção:

window.onload = function() { ...}

15.2 O fluxo de eventos

Além dos eventos básicos que foram vistos, os navegadores incluem um mecanismo relacionado chamado fluxo de eventos ou “fluxo de eventos”. O fluxo de eventos permite que vários elementos diferentes respondam ao mesmo evento.

Se um item <div> com um botão estiver definido no seu interior quando o usuário clica em O botão, o navegador permite que você atribua uma função de resposta de botão, outra função de resposta para o <div> O que contém e outra função de resposta para a página completa. Desta forma, um único evento (a pulsação de um botão) faz com que a resposta de três elementos na página (incluindo a própria página).

O pedido no qual os eventos atribuídos a cada elemento são executados a partir do página é o que constitui o fluxo de eventos. Além disso, existem muitas diferenças no fluxo de eventos de cada navegador.

15.2.1 Borbulando

Neste modelo de fluxo de evento, a ordem que é seguida é do elemento mais específico para o elemento menos específico.

Nos próximos exemplos, a seguinte página HTML é usada:

<html onclick="procesaEvento()"> <head><title>Ejemplo de flujo de eventos</title></head> <body onclick="procesaEvento()"> <div onclick="procesaEvento()">Pincha aqui</div> </body></html>

Quando pressionado no texto “Clique aqui” que está dentro do <div>, os seguintes eventos são executados na ordem que mostra o seguinte esquema:

Figura 15.1 “Esquema de operação” evento “

O primeiro evento que é levado em conta é o gerado pelo <div> contendo a mensagem. Em seguida, o navegador executa os ascendentes do elemento até atingir o nível superior, que é o elemento document.

Este modelo de fluxo de evento é aquele que inclui o Internet Explorer navegador. Os navegadores da família Mozilla (por exemplo, o Firefox) também suportam este modelo, mas ligeiramente modificado. O exemplo anterior em um navegador Family Mozilla apresenta o seguinte fluxo de evento:

Figura 15.2 “Borando do evento “Esquema de operação nos navegadores Mozilla

Embora o objeto window não faz parte do DOM, o fluxo de eventos implementados pela Mozilla Travel O elemento ascendentes Até o mesmo objeto window, adicionando um mais evento ao modelo do Internet Explorer.

15.2.2 Captura de evento

nesse outro Modelo, o fluxo de eventos é definido a partir do elemento menos específico para o elemento mais específico. Em outras palavras, o mecanismo definido é precisamente o oposto do “evento borbulhando”. Este modelo foi usado pelo navegador Netscape Netscape 4.0.

15.2.3 Eventos Dom

O fluxo de eventos definido na especificação do sol suporta borbulhar e a captura, mas o “evento” captura “corre primeiro. Os dois fluxos de eventos viajam todos os objetos DOM do objeto document para o elemento mais específico e vice-versa. Além disso, a maioria dos navegadores implementa os padrões, o fluxo continua até o objeto window.

O fluxo de eventos DOM do exemplo anterior é mostrado abaixo:

Figura 15.3 Esquema de fluxo de eventos do modelo DOM

O mais específico elemento do fluxo de eventos não é o <div> que desencadeia a execução dos eventos, mas o nó do tipo TextNode que contém o <div>. O fato de combinar os dois fluxos de eventos, faz com que o nó mais específico execute dois eventos consecutivamente.

15.3 Manipuladores e ouvintes

Nas seções anteriores o conceito foi introduzido a partir do “manipulador de eventos “ou manipulador de eventos, que são as funções que respondem a eventos que ocorrem. Além disso, três formas de definir os manipuladores de eventos foram visualizados para o modelo de evento básico:

1. JavaScript Código dentro de um atributo do item HTML
2. Definição do evento no HTML item em si, mas o manipulador é uma função externa
3. manipuladores semânticos atribuídos via sol sem a necessidade de modificar o código HTML da página

Qualquer um desses modelos funciona corretamente Todos os navegadores disponíveis hoje. As diferenças entre os navegadores surgem quando mais de um manipulador de eventos são definidos para o mesmo evento de um elemento. A maneira de atribuir e “desativar” várias alças depende completamente do navegador usado.

15.3.1 Dom Event Manipers

A especificação SDI define dois outros métodos semelhantes aos disponíveis para a Internet Explorer e chamado addEventListener() e removeEventListener() para associar e desassociar manipuladores de eventos.

a principal diferença entre esses métodos E o acima é que, neste caso, são necessários três parâmetros: o nome do “ouvinte do evento”, uma referência à função responsável pelo processamento do evento e do tipo de fluxo de eventos ao qual é aplicado.

O primeiro argumento não é o nome completo do evento como acontece no modelo do Internet Explorer, mas você deve excluir o prefixo on. Em outras palavras, se no Internet Explorer o nome onclick agora será usado click.

O terceiro parâmetro é , o manipulador é usado na fase de captura. Se o terceiro parâmetro for false, o manipulador está associado à fase bubblora.

Em seguida, os exemplos acima são exibidos usando os métodos definidos por DOM:

function muestraMensaje() { console.log("Has pulsado el ratón");}var elDiv = document.getElementById("div_principal");elDiv.addEventListener("click", muestraMensaje, false); // Más adelante se decide desasociar la función al eventoelDiv.removeEventListener("click", muestraMensaje, false);

associando múltiplos Funções para um único evento:

function muestraMensaje() { console.log("Has pulsado el ratón");} function muestraOtroMensaje() { console.log("Has pulsado el ratón y por eso se muestran estos mensajes");} var elDiv = document.getElementById("div_principal");elDiv.addEventListener("click", muestraMensaje, true);elDiv.addEventListener("click", muestraOtroMensaje, true);

Se uma função estiver associada a um determinado fluxo de evento, essa função só pode ser desassociada em o mesmo tipo de fluxo de eventos. Se o exemplo a seguir for considerado:

function muestraMensaje() { console.log("Has pulsado el ratón");} var elDiv = document.getElementById("div_principal");elDiv.addEventListener("click", muestraMensaje, false); // Más adelante se decide desasociar la función al eventoelDiv.removeEventListener("click", muestraMensaje, true);

A última instrução tenta desassociar a função muestraMensaje No fluxo de eventos de captura, enquanto se associando, o fluxo de eventos borbulhantes foi indicado. Embora a execução do aplicativo não pare e nenhum erro ocorra, a última instrução não tem nenhum efeito.

15.4 O evento

Quando um evento ocorre, não é suficiente Atribuindo uma função responsável pelo processamento desse evento. Normalmente, a função que processa o evento precisa de informações sobre o evento produzido: a chave que foi pressionada, a posição do mouse, o elemento que o evento produziu, etc.

o objeto event é o mecanismo definido pelos navegadores para fornecer toda essa informação. É um objeto que é criado automaticamente quando ocorre um evento e que é destruído automaticamente quando todas as funções atribuídas ao evento foram executadas.

O domingo especifica que o objeto event é o único parâmetro que deve ir para as funções responsáveis pelo processamento de eventos. Portanto, nos navegadores que seguem os padrões, o objeto pode ser acessado event Através da matriz dos argumentos da função:

Também é possível indicar o nome argumento explicitamente:

elDiv.onclick = function(event) { ...}

o A operação dos navegadores que seguem os padrões podem parecer “mágicos”, já que na declaração da função indica que possui um parâmetro, mas no aplicativo nenhum parâmetro é passado para essa função. Na verdade, os navegadores que seguem os padrões criam automaticamente esse parâmetro e sempre passam para a função encarregada de manusear o evento.

15.4.1 Propriedades e métodos

Mesmo que o mecanismo definido por Navegadores para o objeto event É semelhante, existem inúmeras diferenças assim que as propriedades e métodos do objeto.

15.4.1.1 Propriedades definidas por Dom

A tabela a seguir coleta as propriedades definidas para o objeto event Nos navegadores que seguem os padrões:

Ao contrário do que acontece com o Internet Explorer, a maioria das propriedades do objeto event do sol leitura. Especificamente, apenas as seguintes propriedades são lidas e gravadas: altKey, button e keyCode.

A tecla é uma chave especial que está em alguns teclados de computador muito antigos. Atualmente, no PC Computadores, é assimilado para a tecla Alt ou a tecla do Windows, enquanto em computadores do tipo Mac, ele é assimilado à chave Command

15.4.2 Semelhanças e diferenças entre os navegadores

15.4.2.1 Similaridades

Em ambos os casos A propriedade do tipo é usada para obter o tipo de evento Isso é sobre:

Enquanto o manipulador de eventos inclui o prefixo on em Seu nome, o tipo de evento retornado pela propriedade type Dispensa desse prefixo.É por isso que no exemplo anterior compara seu valor com click e mouseover e não com onclick e onmouseover

Outra semelhança é o uso da propriedade keyCode para obter o código correspondente ao caractere da chave que foi pressionada. A chave pulsada nem sempre representa um caractere alfanumérico. Ao pressionar a tecla ENTER Por exemplo, o código . A barra de espaço corresponde ao código 32 e a tecla Excluir tem um código igual a .

um mais maneira imediata de verificar se algumas chaves especiais foram pressionadas, é usar as propriedades shiftKey altKey e ctrlKey

Para obter a posição do mouse com relação à parte visível da janela, as propriedades e clientY. Da mesma forma, para obter a posição do ponteiro do mouse em relação à tela inteira, as propriedades são usadas screenX e screenY.

15.4.2.2 Diferenças

Uma das principais diferenças é a maneira pela qual o elemento que origina o evento é obtido. Se um elemento <div> é atribuído um evento onclick pressionando com o mouse o interior do <div> um evento cujo objetivo é originada é o

// Internet Explorervar objetivo = elEvento.srcElement; // Navegadores que siguen los estandaresvar objetivo = elEvento.target;

Outra diferença importante é que se relaciona com a obtenção do personagem correspondente à chave pulsada. Cada tecla pulsada associou dois códigos diferentes: o primeiro é o código da chave que foi pressionado e o outro código é aquele que se refere ao caractere pulsado.

O primeiro código é um código de chave interno Para javascript. O segundo código coincide com o código de caractere ASCII. Desta forma, a letra possui um código interno igual a 65 e um código ASCII de 97. Por outro lado, a letra A tem um código interno também de 65 e um código ASCII de 95

No Internet Explorer, o conteúdo da propriedade keyCode depende de cada evento. Em eventos “Pressione Pressione” (onkeyup e onkeydown) Seu valor é igual ao código interno. Em eventos “Escrever com chaves” (onkeypress) Seu valor é igual ao código ASCII do caractere pressionado.

pelo contrário, nos navegadores que se seguem Os padrões de propriedade keyCode é igual ao código interno em eventos “tecla Press” (onkeyup e onkeydown) e é igual a 0 no “Gravar com chaves” eventos (onkeypress).

Na prática, isso pressupõe que nos eventos onkeyup Você pode usar a mesma propriedade em todos os navegadores:

function manejador(elEvento) { var evento = elEvento || window.event; console.log(" El código de la tecla pulsada es " + evento.keyCode);}document.onkeyup = manejador;document.onkeydown = manejador;

Neste caso, se a página for carregada em qualquer navegador e pressionada, por exemplo, a chave A, a próxima mensagem:

Figura 15.4 Mensagem exibida no navegador Firefox

A grande diferença ocorre E ao tentar obter o personagem que foi pressionado, neste caso a letra . Para obter a carta, você deve primeiro obter seu código ASCII. Como discutido, na Internet explorar o valor da propriedade keyCode No evento onkeypress é igual ao caractere ASCII:

function manejador() { var evento = window.event;

 // Internet Explorer var codigo = evento.keyCode;} document.onkeypress = manejador;

No entanto, nos navegadores que não são o Internet Explorer, O código anterior é igual a 0 para qualquer chave pulsada. Nestes navegadores seguindo os padrões, a propriedade deve ser usada charCode, que retorna o código da chave pulsada, mas apenas para o evento onkeypress:

function manejador(elEvento) { var evento = elEvento;

 // Navegadores que siguen los estándares var codigo = evento.charCode;} document.onkeypress = manejador;

uma vez obteve o Código em cada navegador, a função deve ser usada String.fromCharCode() para obter o caractere cujo código ASCII é passado como um parâmetro. Portanto, a solução completa para obter a chave pulsada em qualquer navegador é a seguinte:

function manejador(elEvento) { var evento = elEvento || window.event; var codigo = evento.charCode || evento.keyCode; var caracter = String.fromCharCode(codigo);} document.onkeypress = manejador;

Uma das propriedades mais interessantes é a possibilidade de impedir o comportamento normal de um evento a ser concluído.Em outras palavras, com o JavaScript, é possível não mostrar qualquer caractere quando uma tecla é pressionada, não envie um formulário após pressionar o botão de envio, não carregue nenhuma página pressionando um link, etc. O método avançado de impedir que um evento a execução de sua ação associada depende de cada navegador:

// Navegadores que siguen los estandareselEvento.preventDefault();

no modelo de evento básico também é possível impedir o comportamento padrão de alguns eventos. Se, por exemplo, em um elemento o seguinte manipulador de eventos é indicado:

<textarea onkeypress="return false;"></textarea>

No <textarea> Não será possível escrever qualquer caractere, já que o manipulador de eventos retorna false e esse é o valor necessário para evitar As extremidades de execução do evento e, portanto, para evitar que a carta seja escrita.

Então, é possível definir alças de eventos que retornam ou Dependendo de alguns parâmetros. Por exemplo, um número de caracteres que podem ser gravados podem ser projetados em um <textarea>

function limita(maximoCaracteres) { var elemento = document.getElementById("texto"); if(elemento.value.length >= maximoCaracteres ) { return false; } else { return true; }}

<textarea onkeypress="return limita(100);"></textarea>

A operação do exemplo anterior é detalhada abaixo:

1. o evento onkeypress para controlar se a chave é escrita ou não.
2. O valor retornado é retornado pela função externa limita() para o qual o valor é passado o valor 100
3. se o valor retornado por limita() é true, o evento ocorre normalmente e o caractere é escrito no <textarea>. Se o valor retornado por limita() é false, o evento não ocorre e, portanto, o caractere não é escrito no <textarea>
4. a função limita() retorna ou false Após verificar se o número de caracteres do <textarea> é maior ou menor que o número máximo de caracteres que aconteceu como um parâmetro.

o objeto event também permite que você pare completamente a execução do fluxo normal de eventos:

// Navegadores que siguen los estandareselEvento.stopPropagation();

Ao interromper o fluxo de eventos pendentes, os eventos que permanecem a partir desse momento são superados até que todos os elementos pendentes sejam executados para o elemento window.

15.5 Tipos de eventos

A lista completa de eventos que podem ser gerados em um navegador podem ser divididas em quatro g grandes Rúpias Dom Especificação Define os seguintes grupos:

• eventos do mouse: eles são originários quando o usuário usa o mouse para executar algumas ações.
• Eventos de teclado: eles são originários quando o usuário pressiona qualquer chave em seu teclado.
• eventos HTML: eles são originários quando ocorrem alterações na janela do navegador ou quando certas interações entre o cliente e o servidor ocorrem.
• Dom eventos: eles são originários Uma mudança ocorre na estrutura DOM da página. Eles também são chamados de “eventos de mutação”.

15.5.1 Eventos do mouse

Os eventos do mouse são, com muita diferença, a maioria dos funcionários em aplicativos da Web. Os eventos incluídos nesta classificação são os seguintes:

15.5.2.1 Propriedades

O objeto de evento contém as seguintes propriedades para eventos de teclado:

• a propriedade keyCode
• A propriedade charCode (apenas sol)
• a propriedade srcElement (Internet Explorer) ou target (dom)
• propriedades shiftKey ctrlKey, altKey e metaKey (apenas sol)

Quando uma tecla é pressionada a um caractere alfanumérico, ocorre a seguinte sequência de Eventos: , keypress keyup. Quando outro tipo de chave é pressionado, a seguinte seqüência ocorre: , keyup. Se a chave for mantida, no primeiro caso, os eventos são continuamente repetidos /div> e keypress e no segundo caso, repita o evento Continuamente.

15.5.3 Eventos HTML

Os eventos HTML definidos são coletados na tabela a seguir:

Um dos eventos mais utilizados é o evento load, já que todas as manipulações realizadas por DOM exigem que a página seja cobrada completa e, portanto, a árvore Dom foi completamente Construído.

O elemento Define as propriedades e scrollTop que pode ser usado junto com o evento scroll.

15.5.4 Eventos Sun

Embora eventos deste tipo façam parte do Especificação oficial do sol, ainda não foi implementada em todos os navegadores.A tabela a seguir coleta os eventos mais importantes deste tipo: