Eventos | JavaScript | CLMGF
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.
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:
elementos para os quais é definido
um item perde o <button>, , <select>
onchange um elemento foi modificado <input>, <select>,
onclick Pressione e solte o mouse Todos os elementos ondblclick Pressione duas vezes seguidas com o mouse Todos os elementos
onfocus um item recebe o foco <button>, <input>, <label> <select>, <textarea>,
onkeydown Prima uma tecla e não solte-a elementos de formulário e <body>
onkeypress Pressione um elementos de formulário e
onkeyup lançam uma chave pulsada elementos do formulário e
onload página totalmente carregada
onmousedown Prima um botão do mouse e não solte-o Todos os elementos
onmousemove Mouse todos os elementos
onmouseout o mouse "folhas" de
onmouseover o mouse "entra" no elementos
onmouseup solte o botão do mouse Todos os elementos
onreset Inicialize o formulário <form>
onresize Modifique o tamanho da janela
onselect selecione um texto <input>,
onsubmit Enviar o
onunload a página é abandonada, por exemplo, ao fechar o navegador Dor
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:
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:
Este exemplo inclui uma das instruções mais usadas nos aplicativos JavaScript mais antigos:
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.
Se a variável não for usada this, o código necessário para modificar a cor das bordas, seria a seguinte:
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:
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:
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:
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:
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:
Atribua um identificador exclusivo ao elemento XHTML usando o atributo ID.
Criar uma função JavaScript encarregada de manusear o evento.
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:
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:
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
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:
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:
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:
JavaScript Código dentro de um atributo do item HTML
Definição do evento no HTML item em si, mas o manipulador é uma função externa
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:
associando múltiplos Funções para um único evento:
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:
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:
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:
propriedade / método
boolean retorna Se a tecla e false Em outro caso
booleano indica se o evento pertence ao fluxo de eventos de borbulhamento
Td> button
todo o botão o botão do mouse que foi pressionado.Valores possíveis: 0 – nenhum botão pressionado 1 – botão foi pressionado izquierdo 2 – Se ha pulsado el botón derecho 3 – Se pulsan a la vez el botón izquierdo y el derecho 4 5 – Se pulsan a la vez el botón izquierdo y el central 6 – Se pulsan a la vez el botón derecho y el central 7` – são pressionados ao mesmo tempo o 3
cancelable boolean indica se o evento pode cancelar
cancelBubble booleano indica se o fluxo de eventos do tipo borbulhante
parou charCode número inteiro o código Unicode de caractere correspondente à chave pulsada
clientX número completo coordenada x da posição do mouse em relação à área visível do
número inteiro coordenada e a posição do mouse re Esboço da área visível do
ctrlKey boolean retorna true Se a tecla e false em outro caso
currentTarget elemento o elemento que é o objetivo do evento
número completo o número de vezes os botões do mouse foram pressionados
número inteiro a fase à qual o evento pertence: DIV ID = "E635A6C803"> – captura de fases 1 – no item de destino 2 – Borbulhar de fase
isChar booleano indica se a tecla de prensagem corresponde a um caractere
keyCode número inteiro Indica o código numérico do Tecla pressionado
metaKey número completo retorna Se a tecla e false em outro caso
pageX inteiro coordenada x da posição do mouse em relação à página
número completo coordenada e posição do mouse em relação à página
preventDefault() a função é usada para cancelar a ação predefinida do evento
relatedTarget elemento o elemento que é o objetivo secundário do evento ( Relacionado a eventos do mouse)
screenX número completo x coordenar o posição do mouse com relação à tela cheia
screenY inteiro número coordenada e posição do mouse sobre a tela inteira
shiftKey boolean retorna true Se a tecla e false em outro caso
stopPropagation() função é usado para parar o fluxo de eventos do tipo borbulhando
elemento o elemento que origina o evento
timeStamp número A data e a hora em que o evento
type é produzido
texto string o nome do evento
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
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:
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:
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:
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:
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:
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:
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>
A operação do exemplo anterior é detalhada abaixo:
o evento onkeypress para controlar se a chave é escrita ou não.
O valor retornado é retornado pela função externa limita() para o qual o valor é passado o valor 100
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>
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:
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.
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:
click ocorre quando o botão esquerdo do mouse é pressionado.Também ocorre quando o foco do aplicativo está localizado em um botão e pressione a tecla ENTER
dblclick ocorre quando o botão esquerdo do mouse
é pressionado duas vezes
mousedown ocorre quando qualquer botão do mouse é pressionado
mouseout ocorre quando o ponteiro do mouse está dentro de um elemento e o usuário move o ponteiro para um lugar fora do elemento
ocorre quando o ponteiro do mouse está fora de um elemento e o usuário move o ponteiro para um lugar dentro do elemento
mouseup ocorre quando qualquer botão do mouse é liberado que foi pressionado
mousemove ocorre quando o apostador ou o mouse está em um elemento
Todos os elementos das páginas suportam os eventos da tabela anterior.
15.5.1.1 Propriedades
O objeto de evento contém as seguintes propriedades para eventos do mouse:
coordenadas do mouse (todas as coordenadas diferentes relativas a elementos diferentes)
a propriedade type
a propriedade srcElement (Internet Explorer) ou target (dom)
propriedades shiftKey ctrlKey, altKey e metaKey (apenas Dom)
a propriedade button (apenas nos eventos mousedown , mouseout, mouseover e mouseup
eventos mouseover e mouseout tem propriedades adicionais. Internet Explorer define a propriedade fromElement, que se refere ao elemento da qual o ponteiro do mouse foi movido e toElement Esse é o elemento ao qual O ponteiro do mouse foi movido. Desta forma, no evento mouseover, a propriedade toElement é idêntica à srcElement e No evento mouseout, a propriedade fromElement é idêntica à srcElement.
Nos navegadores que suportam o padrão DOM, há apenas uma propriedade chamada relatedTarget. No evento mouseout, relatedTarget aponta para o elemento ao qual o mouse foi movido. No caso mouseover, relatedTarget aponta para o elemento do qual o ponteiro do mouse foi movido.
quando um O botão do mouse é pressionado, a sequência de eventos que ocorre é a seguinte: mousedown, mouseup, click. Portanto, a sequência de eventos necessários para atingir o clique duplo se torna tão complexa quanto o seguinte: mousedown, mouseup, click, mousedown, mouseup, click,
15.5.2 Eventos de teclado
Os eventos incluídos nesta classificação são os seguintes:
keydown ocorre quando você pressiona qualquer tecla no teclado. Também ocorre continuamente se o
é produzido quando é puxado uma tecla correspondente a um alfanumérico Personagem (tecidos não são levados em conta como SHIFT ALT, etc.). Também ocorre continuamente se o "5950064a9e"> é produzido quando é liberado qualquer chave pulsada
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)
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:
load ocorre no objeto da janela quando a página é completamente carregado. No elemento <img> cuando se carga por completo la imagen. En el elemento Quando o objeto
é carregado tr id = "e0b9e62">
ocorre no objeto da janela quando a página desaparece completamente (ao fechar a janela do navegador, por exemplo). No elemento <object> Quando o objeto desaparece.
abort ocorre em um elemento <object> Quando o usuário interrompe o download do item antes de terminar
error Ocorre no objeto da janela quando ocorre um erro de javascript. No elemento <img> Quando a imagem não pôde ser carregada completamente e no item <object> Quando o item não é carregado corretamente
ocorre quando vários caracteres de uma caixa de texto são selecionados (<input> e
change ocorre Quando uma caixa de texto (<input> e <textarea>) Perca o foco e seu conteúdo variou. Também ocorre quando o valor de um elemento <select>
ocorre quando você pressiona um botão de envio de envio ( <input type="submit">
reset ocorre quando você pressiona Em um botão de redefinição (<input type="reset">)
resize Ocorre no objeto da janela quando a janela do Navegador é redimensionada
scroll ocorre em qualquer item que tem uma barra de rolagem, quando o usuário o usa. O item <body> contém a barra de rolagem da página completa
focus ocorre em qualquer elemento (incluindo o objeto da janela) quando o item recebe o
Ocorre em qualquer elemento (incluindo o objeto da janela) quando o item perde o
foco 7e66fa8b9a ">
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:
DOMSubtreeModified ocorre quando os nós são adicionados ou excluídos na subárvore de um documento ou