Currying Event Handlers

This is useful because the handler can have multiple items passed to it, and since it has a name, it's easy to remove.

<h1>Currying an event handler</h1>
<div class="wrapper">
  <button type="button" class="trigger">Click Me</button>
</div>

const wrapper = document.querySelector(".wrapper");
const button = document.querySelector(".trigger");
const handleClick = (wrapper) => {
  return (e) => {
    console.log(wrapper, e);
  };
};

button.addEventListener("click", handleClick(wrapper));

// Then later in the application...
button.removeEventListener("click", handleClick);