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);