Definición

addEventListener() registra un evento a un objeto en específico. El Objeto especifico puede ser un simple elemento en un archivo, el mismo [documento](<https://developer.mozilla.org/en-US/docs/Web/API/Document>), una [ventana](<https://developer.mozilla.org/en-US/docs/Web/API/Window>) o un [XMLHttpRequest](<https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest>).

target.addEventListener(tipo, listener[, useCapture]);

Escuchar evento desde html

Para lograr esto podemos definir una propiedad al elemento que normalmente es el nombre del evento con el prefijo “on” y como valor le pasamos la funcion que ejecutará.

<button id="btnCalculo" onclick="console.log("Hice click!")">Calcular</button>

• Tambien podriamos definir la función en un archivo script.

  <button id="btnCalculo" onclick="btnOnclick()")>Calcular</button>
  <script src="script.js" ></script>
  

  function btnOnclick() {
  	console.log("Hice click");
  }
  

Escuchar un evento desde JavaScript

Escuchar un elemento desde JavaScript evita que nuestro html se vea desordenado y además es la forma que vas a encontrar mayormente en cualquier proyecto.

<button id="btn">Enviar</button>

const btn = document.getElementById("btn");

btn.addEventListener("click", btnClick);

function btnClick() {
	console.log("Hice click!");
}