Eventos del DOM: Controlar el eventos del ratón

☆ ¿Cómo agregar un evento de clic mediante un listener un botón con JavaScript?

<button id="mi-botton">Mi Botón</button>

let contador = 0;
document.getElementById("mi-botton").addEventListener("click", function () {
  contador++;
  document.getElementById("mi-botton").innerHTML = contador;
});

En el código anterior se muestra como se incrementa una variable contador cada vez que se hace click sobre el botón. Este valor actualizado es mostrado inmediatamente después sobre el mismo botón.

☆ ¿Cómo agregar directamente un evento de clic a un botón con JavaScript?

document.getElementById("mi-botton").onclick = function () {
  contador++;
  document.getElementById("mi-botton").innerHTML = contador;
};

☆ ¿Cómo agregar un evento de clic a un botón sin usar JavaScript?

<button id="mi-botton" onClick="cuandoSeHaceClick">Mi Botón</button>

var contador = 0;
function cuandoSeHaceClick() {
  contador++;
  document.getElementById("mi-botton").innerHTML = contador;
}