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