O addEventListener() método
Exemplo
Adicionar um ouvinte de evento que é acionado quando um usuário clica em um botão:
document.getElementById("myBtn").addEventListener("click", displayDate); Tente você mesmo " O addEventListener() método atribui um manipulador de eventos para o elemento especificado.
O addEventListener() método atribui um manipulador de eventos a um elemento sem substituir os manipuladores de eventos existentes.
Você pode adicionar muitos manipuladores de eventos para um elemento.
Você pode adicionar muitos manipuladores de eventos do mesmo tipo para um elemento, ou seja, dois "click" eventos.
Você pode adicionar ouvintes de eventos a qualquer objeto DOM não só elementos HTML. ou seja, o objeto de janela.
O addEventListener() método torna mais fácil de controlar a forma como o evento reage a borbulhar.
Ao usar o addEventListener() método, o JavaScript é separada da marcação HTML, para melhor legibilidade e permite que você adicione ouvintes de eventos, mesmo quando você não controla a marcação HTML.
Você pode facilmente remover um ouvinte de evento usando o removeEventListener() método.
Sintaxe
element .addEventListener( event, function, useCapture );O primeiro parâmetro é o tipo de evento (como "click" ou "mousedown" ).
O segundo parâmetro é a função que deseja chamar quando o evento ocorre.
O terceiro parâmetro é um valor booleano que especifica se a usar subida do evento ou captura evento. Este parâmetro é opcional.
Note que você não use o "on" prefixo para o evento; usar "click" em vez de "onclick" .
Adicionar um manipulador de eventos a um elemento
Exemplo
Alerta "Olá mundo!" quando o usuário clica em um elemento:
element .addEventListener("click", function(){ alert("Hello World!"); }); Tente você mesmo " Você também pode se referir a uma função externa "com o nome":
Exemplo
Alerta "Olá mundo!" quando o usuário clica em um elemento:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Tente você mesmo " Adicionar Muitos manipuladores de eventos para o mesmo elemento
O addEventListener() método permite que você adicione vários eventos ao mesmo elemento, sem substituir eventos existentes:
Exemplo
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Tente você mesmo " Pode adicionar eventos de tipos diferentes para o mesmo elemento:
Exemplo
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Tente você mesmo " Adicionar um manipulador de eventos para o objeto de janela
O addEventListener() método permite que você adicione ouvintes de eventos em qualquer objeto DOM HTML como elementos HTML, o documento HTML, o objeto de janela, ou outros objetos que suportam eventos, como o xmlHttpRequest objeto.
Exemplo
Adicionar um ouvinte de evento que é acionado quando um usuário redimensiona a janela:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Tente você mesmo " passando parâmetros
Ao passar valores de parâmetros, utilize uma "função anônima" que chama a função especificada com os parâmetros:
Borbulhagem evento ou de captação de acontecimentos?
Há duas formas de propagação do evento no DOM HTML, borbulhantes e capturar.
propagação do evento é uma maneira de definir a ordem dos elementos quando ocorre um evento. Se você tem um <p> elemento dentro de um <div> elemento, e que o usuário clica no <p> elemento, que elemento "click" evento deve ser tratado em primeiro lugar?
Na subida do evento o mais interior do elemento é tratado primeiro e depois o exterior: o <p> evento click do elemento é tratado em primeiro lugar, em seguida, o <div> clique evento elemento de.
Na captura de eventos do exterior a maioria de elemento é tratado primeiro e depois o interior: o <div> clique evento elemento de será tratado em primeiro lugar, em seguida, o <p> evento click do elemento.
Com o addEventListener() método, você pode especificar o tipo de propagação usando o "useCapture" parâmetro:
addEventListener( event , function , useCapture );O valor padrão é falso, que usará a propagação borbulhando, quando o valor é definido como verdadeiro, o evento usa a propagação de captura.
Exemplo
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Tente você mesmo " O removeEventListener() método
O removeEventListener() método remove manipuladores de eventos que foram anexados com o addEventListener() método:
Suporte a navegadores
Os números na tabela especifica a primeira versão do navegador que suporta inteiramente esses métodos.
| Método | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Nota: O addEventListener() e removeEventListener() métodos não são suportados no IE 8 e versões anteriores e Opera 6.0 e versões anteriores. No entanto, para estas versões específicas do navegador, você pode usar o attachEvent() método para anexar um manipuladores de eventos para o elemento, eo detachEvent() método para removê-lo:
element. attachEvent (event, function);
element. detachEvent (event,
function); Exemplo
solução cross-browser:
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
}
Tente você mesmo " HTML DOM Evento Object Reference
Para obter uma lista de todos os eventos HTML DOM, vá para a completa HTML DOM Evento Object Reference .