<button id="single" class="btn">SINGLE CALLBACK</button>
<hr>
<button id="multiple" class="btn">MULTIPLE CALLBACKS</button>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding: 1rem;
  text-align: center;
}
const singleBtn = document.querySelector("#single");

const handleClick = () => {
  console.log("click event listener callback");
};

singleBtn.addEventListener("click", handleClick);

// ===============================================
const multiBtn = document.querySelector("#multiple");

const firstCallback = () => {
  console.log("First callback!");
};
const secondCallback = () => {
  console.log("Second callback!");
};
const thirdCallback = () => {
  console.log("Third callback!");
};

multiBtn.addEventListener("click", firstCallback);
multiBtn.addEventListener("click", secondCallback);
multiBtn.addEventListener("click", thirdCallback);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.