Anonymous Function and Arrow Function [duplicate]

In most instances arrow functions work just fine but during one of my coding time I noticed it didn’t work as intended until I switched to anonymus function also a function This is about the second time I noticed this during my learing journey and I’ve not been able to get an accurate explanation why it is so.

const checkbox = document.querySelector('input');

checkbox.addEventListener('change', () => {

    console.log(this.checked);
    
});

const checkbox = document.querySelector('input');

checkbox.addEventListener('change', function() {

    console.log(this.checked);
    
});

In both instances I’m trying to get the boolean value when the box is checked or unchecked but the arrow function returns undefined, while the anonymus function seems to work just fine.