const res = document.querySelector("#resultado");
const demo = document.querySelectorAll(".demo");
demo[0].addEventListener("click", (event) => {
  resultado.innerHTML = `Evento: ${event.type}`;
});
demo[1].addEventListener("mousedown", (event) => {
  resultado.innerHTML = `Evento: ${event.type}`;
});
demo[2].addEventListener("mouseup", (event) => {
  resultado.innerHTML = `Evento: ${event.type}`;
});
demo[3].addEventListener("mouseover", (event) => {
  resultado.innerHTML = `Evento: ${event.type}`;
});
demo[4].addEventListener("mouseout", (event) => {
  resultado.innerHTML = `Evento: ${event.type}`;
});
demo[5].addEventListener("dblclick", (event) => {
  resultado.innerHTML = `Evento: ${event.type}`;
});

<div class="demo">Aqui click</div>
<div class="demo">Aqui mousedown</div>
<div class="demo">Aqui mouseup</div>
<div class="demo">Aqui mouseover</div>
<div class="demo">Aqui mouseout</div>
<div class="demo">Aqui duplo clique</div>
<div id="resultado"></div>