JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

window.addEventListener("DOMContentLoaded", (event) => {
  Init();
  AddEventListeners();
});

function Init() {
  let btn = document.getElementById("btn");
  btn.innerText = BUTTON_TEXT["unhovered"];
  // Other initialization like style properties ...
}

function AddEventListeners() {
  let btn = document.getElementById("btn");
  for (const [key, value] of Object.entries(EVENTS)) {
    console.log(`Add listener: ${value} for ${key}`);
    btn.addEventListener(key, value);
  }
}

const EVENTS = {
  "mouseover": (event) => {
    console.log("on"+ event.type);
    event.target.innerText = BUTTON_TEXT["hovered"];
  },
  "mouseout": (event) => {
    console.log("on"+ event.type);
    event.target.innerText = BUTTON_TEXT["unhovered"];
  },
  "mousedown": (event) => {
    console.log("on"+ event.type);
    event.target.innerText = BUTTON_TEXT["clicked"];
  },
  "mouseup": (event) => {
    console.log("on"+ event.type);
    event.target.innerText = BUTTON_TEXT["unhovered"];
  },
  "dblclick": (event) => {
    console.log("on"+ event.type);
    event.target.innerText = BUTTON_TEXT["dbclicked"];
  },
};

const BUTTON_TEXT = {
  "unhovered": "come on",
  "hovered": "try me",
  "clicked": "you really did!",
  "dbclicked": "itchy!",
};