HTML DOM método addEventListener ()

Exemplos

Para elemento <button> para adicionar um evento de clique. Quando o usuário clica no botão na id = "demonstração" do <p> elemento de saída "Olá Mundo":

document.getElementById ( "myBtn"). addEventListener ( "click", function () {
. Document.getElementById ( "demo") innerHTML = "Olá Mundo";
});

tente »

Definição e Uso

addEventListener () é usado para adicionar um manipulador de eventos a um elemento especificado.

Dica: Use o removeEventListener () método 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

Nota: Internet Explorer 8 e versões anteriores do IE não suportam método addEventListener () ,, Opera 7.0 e versões anteriores não suportam Opera. No entanto, eles não suportam a função do navegador, você pode usar o método attachEvent () para adicionar um manipulador de eventos (ver "Mais exemplos" para a solução cross-browser).

gramática

elemento .addEventListener (evento, função, useCapture )

parâmetro Valor

parâmetros	descrição
evento	Obrigação. Uma seqüência de caracteres especificando o nome do evento. Nota: Não use o prefixo "on". Por exemplo, use "clique", em vez de "onclick". Dica: Todos os eventos HTML DOM, você pode ver a nossa completa HTML DOM Evento Object Reference .
função	Obrigação. Função a ser executada quando o evento especificado dispara. Quando o objeto de evento como o primeiro argumento passado para a função. objeto tipo de evento depende do evento particular. Por exemplo, "clique" evento pertence MouseEvent objeto (evento de mouse).
useCapture	Opcional. Um valor booleano que especifica se a execução do evento na captura ou fase borbulhante. Valores possíveis: true - manipulador de eventos executados durante a fase de captura falso-falso-padrão. Os manipuladores de eventos são executados na fase de bolha

detalhes técnicos

versão DOM:	DOM Nível 2 Eventos
retorna:	Nenhum valor de retorno
Record:	No Firefox 6 e Opera 11.60 em useCapture parâmetro é opcional. (No Chrome, IE e Safari sempre foi opcional).

mais exemplos

Exemplos

Você pode fazer referência a função externa pelo nome da função.

Este exemplo demonstra como executar um usuário clica elemento <button> Função:

. Document.getElementById ( "myBtn") addEventListener ( "clique", myFunction);

myFunction function () {
. Document.getElementById ( "demo") innerHTML = "Olá Mundo";
}

tente »

Exemplos

Você pode adicionar tantos eventos no documento, acrescentando que o evento não irá substituir o evento existente.

Este exemplo demonstra como adicionar dois evento clique no elemento <button>:

. Document.getElementById ( "myBtn") addEventListener ( "clique", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "clique", someOtherFunction);

tente »

Exemplos

Você pode adicionar diferentes tipos de eventos no mesmo elemento.

Este exemplo demonstra como adicionar vários eventos com um elemento <button>:

. Document.getElementById ( "myBtn") addEventListener ( "mouseover", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "clique", someOtherFunction);
. Document.getElementById ( "myBtn") addEventListener ( "mouseout", someOtherFunction);

tente »

Exemplos

Ao passar um valor de parâmetro, use a chamada de função com parâmetros de função "anônimo":

document.getElementById ( "myBtn"). addEventListener ( "click", function () {
minhaFuncao (P1, P2);
});

tente »

Exemplos

Modificar <button> elementos de fundo:

document.getElementById ( "myBtn"). addEventListener ( "click", function () {
this.style.backgroundColor = "red";
});

tente »

Exemplos

Utilizar os parâmetros opcionais para demonstrar diferentes fases borbulhantes useCapture e de captura:

. Document.getElementById ( "myDiv") addEventListener ( "clique", myFunction, true);

tente »

Exemplos

Usando o método removeEventListener () para remover o método addEventListener () para adicionar manipuladores de eventos:

// Adicionar <div> manipulador de eventos
. Document.getElementById ( "myDiv") addEventListener ( "mousemove", myFunction);

// Remove <div> manipulador de eventos
. Document.getElementById ( "myDiv") removeEventListener ( "mousemove", myFunction);

tente »

Exemplos

Se seu navegador não suporta o método addEventListener (), você pode usar o método attachEvent () em vez.

O exemplo a seguir demonstra a solução cross-browser:

var x = document.getElementById ( "myBtn");
if (x.addEventListener) {// todos os principais navegadores, exceto IE 8 e versões anteriores do IE
x.addEventListener ( "clique", myFunction);
} Else if (x.attachEvent) {// IE 8 e versões anteriores do IE
x.attachEvent ( "onclick", myFunction);
}

tente »