What does this refer to in an event handler?

In a regular-function handler this is the element the listener is attached to, but in an arrow function this keeps the outer scope's value — use event.currentTarget instead.

button.addEventListener("click", function() {
    // The button element
    console.log(this);
    this.disabled = true;
});

Warning with arrow functions:

button.addEventListener("click", () => {
    // NOT the button! (lexical this)
    console.log(this);
});

Alternative: Use event.target or event.currentTarget:

button.addEventListener("click", (event) => {
    // Element clicked
    console.log(event.target);
    // Element with listener
    console.log(event.currentTarget);
});