Escuta de Eventos do JavaScript

A mais recente funcionalidade do manipulador de eventos do JavaScript é o ouvinte de eventos. O ouvinte de eventos monitora eventos no elemento.

Vamos usaraddEventListener()para substituir a atribuição direta de eventos a propriedades do elemento.

Método addEventListener()

addEventListener()O método adiciona o manipulador de eventos ao elemento especificado.

Podemos reescrever o exemplo de cor aleatória (do capítulo anterior), conforme mostrado a seguir:

document.querySelector("button").addEventListener("click", bgChange);
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　",　+　random(255)　+　",　+　random(255)　+　)");
　　　document.body.style.backgroundColor = color;
}

Ainda estamos usando comanteriorigualbgChange()Função. VamosaddEventListener()Método anexado ao botão.

addEventListener() Aceita dois parâmetros obrigatórios-O evento a ser monitorado e a função de callback do ouvinte.

Este método é semelhante ao atributo do manipulador de eventos (no capítulo anterior), mas a sintaxe é claramente diferente.

Sintaxe:

element.addEventListener(event, listener, useCapture)

O primeiro parâmetro é o tipo do evento (por exemplo, 'click' ou 'mousemove').

O segundo parâmetro é a função de ouvinte que chamamos quando o evento ocorrer.

O terceiro parâmetro é um valor booleano que especifica se deve usar o bubbling de eventos ou a captura de eventos. Este parâmetro é opcional.

Adicione o ouvinte de evento ao elemento

Atenção, coloque todo o código dentro deaddEventListener()É muito apropriado usar funções anônimas dentro de métodos, conforme mostrado a seguir:

let para = document.querySelector("#para");
para.addEventListener("click", function() {
this.innerHTML = "Hello world";
});

Você ainda pode chamar funções "nomeadas" externas:

let para = document.querySelector("#para");
para.addEventListener("click", changeText);
function changeText() {
　　　para.innerHTML = "Hello world";
}

Adicionar múltiplos ouvintes de eventos ao mesmo elemento

A primeira vista, o ouvinte de eventos parece muito semelhante às propriedades de manipulador de eventos, mas elas têm algumas vantagens. Podemos configurar vários ouvintes de eventos no mesmo elemento, como mostrado no exemplo a seguir:

document.querySelector("button").addEventListener("click", myFunc);
document.querySelector("button").addEventListener("click", anotherFunc);

Adicionar múltiplos ouvintes de eventos ao mesmo elemento

Podemos adicionar diferentes tipos de eventos ao elemento:1document.querySelector("button").addEventListener("mouseout", myFunc
document.querySelector("button").addEventListener("mouseenter", myFunc2document.querySelector("button").addEventListener("mouseout", myFunc
document.querySelector("button").addEventListener("click", myFunc3document.querySelector("button").addEventListener("mouseout", myFunc

);

Passar parâmetros

Ao passar valores de parâmetro, use uma função anônima que chama a função especificada com os parâmetros:
var btn = document.querySelector("button");
btn.addEventListener("click", function() {
});

myFunc(x, y);

adicionar ouvintes de eventos ao objeto WindowaddEventListener()Além disso, você podeDocumentoeJanelano objeto.

Este exemplo utiliza o seguinteaddEventListener()O método adiciona o evento de clique (click) ao documento:

document.addEventListener("click", function() {
alert("Hello World!!!");
});

Este exemplo utiliza oaddEventListener()O método adiciona o evento de redimensionamento (resize) ao objeto janela:

window.addEventListener("resize", function() {
box.innerHTML = Math.random();
});

Atualmente, o monitoramento de eventos é a maneira mais comum e preferida de lidar com eventos em JavaScript.

método removeEventListener()

Também pode usar aremoveEventListener()O método remove um ou todos os eventos de um elemento.

var box = document.getElementById("para");
//　Anexe um manipulador de evento a um elemento P com id="para"
box.addEventListener("mousemove", myFunc);
//　Remova o manipulador de evento de um elemento P com id="para"
box.removeEventListener("mousemove", myFunc);

O primeiro parâmetro é o tipo do evento (por exemplo, 'click' ou 'mousemove').

O segundo parâmetro é a função que chamamos quando o evento ocorre.

Mais leitura

Referência JavaScript:Referência do objeto de evento HTML DOM