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;
}