JavaScript HTML DOM EventListener
método addEventListener ()
Exemplos
Ouvindo eventos acionado quando o usuário clica no botão:
tente »
addEventListener () é usado para adicionar um manipulador de eventos a um elemento especificado.
addEventListener () para adicionar o manipulador de eventos não substitui o manipulador de eventos existente.
Você pode adicionar vários manipuladores de eventos para um elemento.
É possível adicionar mais do que um do mesmo tipo de processador de eventos para o mesmo elemento, tais como: dois "clique" evento.
Você pode adicionar objetos a qualquer ouvinte de evento DOM, não apenas elementos HTML. Tais como: janela objeto.
addEventListener () método pode controlar mais facilmente evento (borbulhante e captura).
Quando você usa o método addEventListener (), JavaScript tags HTML da esquerda para esculpir, mais legível, na ausência de marcas de controle HTML também pode adicionar ouvintes de evento.
Você pode usar o método removeEventListener () para remover um ouvinte de evento.
gramática
O primeiro parâmetro é o tipo (tal como "clique" ou "mousedown") evento.
O segundo argumento é a chamada de função é acionado após o evento.
O terceiro parâmetro é um valor booleano que é usado para descrever uma subida do evento ou captura. Este parâmetro é opcional.
 | Nota: Não use o prefixo "on". Por exemplo, use "clique", em vez de "onclick". |
|---|
elementos originais adicionar um manipulador de eventos
Exemplos
Quando o usuário clica sobre o elemento pop-up quando o "Olá mundo!":
tente »
Você pode usar o nome da função para fazer referência a uma função externa:
Exemplos
Quando o usuário clica sobre o elemento pop-up quando o "Olá mundo!":
myFunction function () {
alert ( "World Olá!");
}
tente »
Adicionar vários manipuladores de eventos para o mesmo elemento
método addEventListener () permite que você adicione vários eventos para os mesmos elementos, e não substituir eventos existentes:
Exemplos
elemento .addEventListener ( "clique", mySecondFunction );
tente »
Você pode adicionar aos mesmos elementos em diferentes tipos de eventos:
Exemplos
elemento .addEventListener ( "clique", mySecondFunction );
elemento .addEventListener ( "mouseout", myThirdFunction );
tente »
Adicionar um manipulador de eventos para o objeto Janela
addEventListener () permite que você adicione objetos no ouvinte de evento HTML DOM, HTML DOM objectos, tais como: elementos HTML, documentos HTML, objeto de janela. objetos de eventos ou outras despesas, tais como: objeto XMLHttpRequest.
Exemplos
Quando o usuário redefine o tamanho da janela para adicionar ouvintes de eventos:
. Document.getElementById ( "demo") innerHTML = sometext;
});
tente »
passando parâmetros
Ao passar um valor de parâmetro, use a chamada de função com parâmetros de função "anônimo":
captura de evento ou evento de borbulhagem?
A entrega do evento de duas maneiras: borbulhante e captura.
A ordem de entrega de evento dos elementos definidos gatilho evento. Se você <p> elemento para o <div> elemento, o elemento usuário clica <p>, que elemento do evento "clique" para ser disparado-lo?
Borbulhando, o evento será um elemento interno é acionado, em seguida, acionar os elementos externos, a saber: um evento de clique <p> elemento é accionado em primeiro lugar, em seguida, aciona o evento click <div> elemento.
Na captura, o evento será um elemento externo é acionado, elementos internos, em seguida, o evento é acionado, a saber: elemento <div> para desencadear um evento de clique, em seguida, acionar um evento de clique <p> elemento.
addEventListener () para especificar o parâmetro "useCapture" para definir o tipo de entrega:
O valor padrão é falso, que está borbulhando para passar, quando o valor é verdade, usar o evento para capturar transferência.
Exemplos
tente »
removeEventListener () Método
removeEventListener () para remover o método addEventListener () para adicionar manipuladores de eventos:
Suporte a navegadores
Números na tabela representam o primeiro navegador a suportar o número da versão do método.
| caminho | |||||
|---|---|---|---|---|---|
| addEventListener () | 1.0 | 9 | 1.0 | 1.0 | 7 |
| removeEventListener () | 1.0 | 9 | 1.0 | 1.0 | 7 |
Nota: IE 8 e versões anteriores do IE, Opera 7.0 e versões anteriores não suportam o método addEventListener () e removeEventListener (). No entanto, este tipo de versão do navegador pode ser usado método detachEvent () para remover um manipulador de eventos:
element.detachEvent (evento, função);
Exemplos
solução cross-browser:
if (x.addEventListener) {// todos os principais navegadores, exceto IE 8 e versões anteriores
x.addEventListener ( "clique", myFunction);
} Else if (x.attachEvent) {// IE 8 e versões anteriores
x.attachEvent ( "onclick", myFunction);
}
tente »
HTML DOM Evento Object Reference
Todos os eventos HTML DOM, você pode ver a nossa completa HTML DOM Evento Object Reference .