JavaScript DOM EventListener

Índice

O método addEventListener()

Exemplo

Adicione um ouvinte de evento que é acionado quando um usuário clica em um botão:

document.getElementById("myBtn").addEventListener("click", displayDate);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
  document.getElementById("demo").innerHTML = Date();
}
</script>

</body>
</html>

O método addEventListener() anexa um manipulador de eventos ao elemento especificado.

O método addEventListener() anexa um manipulador de eventos a um elemento sem substituir os manipuladores de eventos existentes.

Você pode adicionar muitos manipuladores de eventos a um elemento.

Você pode adicionar muitos manipuladores de eventos do mesmo tipo a um elemento, ou seja, dois eventos de "clique".

Você pode adicionar ouvintes de eventos a qualquer objeto DOM, não apenas a elementos HTML. ou seja, o objeto da janela.

O método addEventListener() facilita o controle de como o evento reage ao borbulhamento.

Ao usar o método addEventListener(), o JavaScript é separado da marcação HTML, para melhor legibilidade e permite adicionar ouvintes de eventos mesmo quando você não controla a marcação HTML.

Você pode remover facilmente um ouvinte de evento usando o método removeEventListener().

Sintaxe

element.addEventListener(event, function, useCapture);

O primeiro parâmetro é o tipo do evento (como "clique" ou "mousedown" ou qualquer outro evento HTML DOM.)

O segundo parâmetro é a função que queremos chamar quando o evento ocorrer.

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

Observe que você não usa o prefixo "on" para o evento; use "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!"); });

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to attach a click event to a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Hello World!");
});
</script>

</body>
</html>

Você também pode se referir a uma função externa "nomeada":

Exemplo

Alerta "Olá, mundo!" quando o usuário clica em um elemento:

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

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>

<button id="myBtn">Try it</button>

<script>
document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
  alert ("Hello World!");
}
</script>

</body>
</html>

Adicione muitos manipuladores de eventos ao mesmo elemento

O método addEventListener() permite adicionar muitos eventos ao mesmo elemento, sem substituir eventos existentes:

Exemplo

element.addEventListener("click", myFunction);
 element.addEventListener("click", mySecondFunction);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add two click events to the same button.</p>

<button id="myBtn">Try it</button>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
  alert ("Hello World!");
}

function someOtherFunction() {
  alert ("This function was also executed!");
}
</script>

</body>
</html>

Você pode adicionar eventos de diferentes tipos ao mesmo elemento:

Exemplo

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method to add many events on the same button.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);

function myFunction() {
  document.getElementById("demo").innerHTML += "Moused over!<br>";
}

function mySecondFunction() {
  document.getElementById("demo").innerHTML += "Clicked!<br>";
}

function myThirdFunction() {
  document.getElementById("demo").innerHTML += "Moused out!<br>";
}
</script>

</body>
</html>

Adicione um manipulador de eventos ao objeto da janela

O método addEventListener() permite adicionar ouvintes de eventos em qualquer HTML Objeto DOM, como elementos HTML, o documento HTML, o objeto janela ou outros objetos que suportam eventos, como o objeto xmlHttpRequest.

Exemplo

Adicione um ouvinte de evento que é acionado quando um usuário redimensiona a janela:

window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = sometext;
});

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example uses the addEventListener() method on the window object.</p>

<p>Try resizing this browser window to trigger the "resize" event handler.</p>

<p id="demo"></p>

<script>
window.addEventListener("resize", function(){
  document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

Passando Parâmetros

Ao passar valores de parâmetros, use uma "função anônima" que chama a função especificada com os parâmetros:

Exemplo

element.addEventListener("click", function(){ myFunction(p1, p2); });

Experimente você mesmo →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript addEventListener()</h2>

<p>This example demonstrates how to pass parameter values when using the addEventListener() method.</p>

<p>Click the button to perform a calculation.</p>

<button id="myBtn">Try it</button>

<p id="demo"></p>

<script>
let p1 = 5;
let p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
  myFunction(p1, p2);
});

function myFunction(a, b) {
  document.getElementById("demo").innerHTML = a * b;
}
</script>

</body>
</html>

Borbulhamento de eventos ou captura de eventos?

Existem duas formas de propagação de eventos no HTML DOM, borbulhando e capturando.

A propagação de eventos é uma forma de definir a ordem dos elementos quando um evento ocorre. Se você tiver um elemento <p> dentro de um elemento <div> e o usuário clicar no elemento <p>, qual elemento O evento "click" deve ser tratado primeiro?

No bubbling o evento do elemento mais interno é tratado primeiro e depois o evento externo: o evento click do elemento <p> é tratado primeiro, depois o evento click do elemento <div>.

Na captura o evento do elemento mais externo é tratado primeiro e depois o interno: o evento click do elemento <div> será tratado primeiro, depois o evento click do elemento <p>.

Com o método addEventListener() você pode especificar o tipo de propagação usando o parâmetro "useCapture":

addEventListener(event, function, useCapture);

O valor padrão é falso, o que utilizará a propagação borbulhante, quando o valor for definido como verdadeiro, o evento utilizará a propagação de captura.

Exemplo

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv1, #myDiv2 {
  background-color: coral;
  padding: 50px;
}

#myP1, #myP2 {
  background-color: white; 
  font-size: 20px;
  border: 1px solid;
  padding: 20px;
}
</style>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>

<h2>JavaScript addEventListener()</h2>

<div id="myDiv1">
  <h2>Bubbling:</h2>
  <p id="myP1">Click me!</p>
</div><br>

<div id="myDiv2">
  <h2>Capturing:</h2>
  <p id="myP2">Click me!</p>
</div>

<script>
document.getElementById("myP1").addEventListener("click", function() {
  alert("You clicked the white element!");
}, false);

document.getElementById("myDiv1").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, false);

document.getElementById("myP2").addEventListener("click", function() {
  alert("You clicked the white element!");
}, true);

document.getElementById("myDiv2").addEventListener("click", function() {
  alert("You clicked the orange element!");
}, true);
</script>

</body>
</html>

O método removeEventListener()

O método removeEventListener() remove manipuladores de eventos que foram anexado com o método addEventListener():

Exemplo

element.removeEventListener("mousemove", myFunction);

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>This div element has an onmousemove event handler that displays a random number every time you move your mouse inside this orange field.</p>
  <p>Click the button to remove the div's event handler.</p>
  <button onclick="removeHandler()" id="myBtn">Remove</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>

Referência de objeto de evento HTML DOM

Para obter uma lista de todos os eventos HTML DOM, consulte nossa referência completa de objeto de evento HTML DOM.