Eventhandler and anonymous function

Hello guys , i don’t understand why we use the event handeler function within an anonymous function in the button element instead of using the eventhandler function directly ? is it because it is declared as a function expression? this code is from the article ‘implementing modules using ES6 syntax’

const buttonElement = document.getElementById('secret-button');
const pElement = document.getElementById('secret-p');
 
const toggleHiddenElement = (domElement) => {
    if (domElement.style.display === 'none') {
      domElement.style.display = 'block';
    } else {
      domElement.style.display = 'none';
    }
}
 
buttonElement.addEventListener('click', () => { // <---- why not use just : ('click',toggleHiddenElement(pElement);
  toggleHiddenElement(pElement);
});```