HTML DOM método addEventListener ()

Exemplos

Adicionar um evento de clique no documento. Quando o usuário clica em qualquer lugar do documento, o id = "demo" do <p> elemento de saída "Olá Mundo":

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

tente »

Definição e Uso

document.addEventListener () é usado para adicionar um manipulador de eventos para o documento.

Dica: Você pode usar document.removeEventListener () método para remover o método addEventListener () para adicionar manipuladores de eventos.

Dica: Use . Elemento addEventListener () método especificado elemento para o manipulador 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 o método addEventListener (), Opera 7.0 e versões anteriores não suportam Opera. No entanto, este tipo de versão do navegador pode ser usado método attachEvent () para adicionar um manipulador de eventos (problemas de compatibilidade cross-browser pode ver "mais exemplos").

gramática

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

parâmetro Valor

parâmetros	descrição
evento	Necessário. String nome da descrição 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	Necessário. Ela descreve as funções desencadeada após o evento. Quando o evento é disparado, 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-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
Records:	No Firefox 6 e Opera 11.60 em useCapture parâmetro é opcional. (No Chrome, IE e Safari sempre foi opcional).

mais exemplos

Exemplos

Pode ser referido pela função externa nome da função:

document.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 um evento de clique em dois documentos:

document.addEventListener ( "clique", myFunction);
document.addEventListener ( "clique", someOtherFunction);

tente »

Exemplos

Você pode adicionar diferentes tipos de eventos no documento.

Este exemplo demonstra como adicionar vários eventos em um documento:

document.addEventListener ( "mouseover", myFunction);
document.addEventListener ( "clique", someOtherFunction);
document.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.addEventListener ( "click", function () {
minhaFuncao (P1, P2);
});

tente »

Exemplos

Modificar <body> elemento do fundo:

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

tente »

Exemplos

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

// Adicionar um manipulador de eventos para o documento
document.addEventListener ( "mousemove", myFunction);

// Remove o manipulador de eventos documento
document.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:

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

tente »