<div class="container">
  <button class="clickable bind-1">
    Clicking me prints to the console, but no style change
  </button>

  <button class="clickable bind-2">
    Clicking me changes the style, but doesn't log a message
  </button>

  <button class="clickable bind-3">
    Clicking on me has both features work
  </button>
</div>

html {
  font-family: sans-serif;
}

.container {
  width: 960px;
  margin: auto;
  text-align: center;
  padding-top: 24px;
}

.clickable {
  display: inline-block;
  border: 1px solid grey;
  border-radius: 0;
  padding: 16px;
  background: #ceeaf7;
  font-size: 24px;
  cursor: pointer;
  border-radius: 4px;

  &:not(:first-child) {
    margin-top: 12px;
  }

  &:hover {
    background: #eff;
  }
}

.clicked-style {
  color: #e03616;
}

function startListening() {
  var message = "Print out this message!";
  var button1 = document.querySelector(".bind-1");
  button1.addEventListener(
    "click",
    buttonClicked.bind({
      message
    })
  );

  var button2 = document.querySelector(".bind-2");
  button2.addEventListener("click", buttonClicked);

  var button3 = document.querySelector(".bind-3");
  button3.addEventListener("click", wrappedButtonClicked(message));
}

function wrappedButtonClicked(innerMessage) {
  return function (event) {
    console.log(innerMessage); // works if `.bind`
    this.className += " clicked-style"; // works if not `.bind`
  };
}

function buttonClicked(event) {
  // this is an object now, not the button itself
  console.log(this.message); // works if `.bind`
  this.className += " clicked-style"; // works if not `.bind`
}

startListening();