entonces, en este desafío, tengo que cambiar el color del elemento al ingresar con el mouse y al salir del mouse.

Este es el sitio web para el desafío.

https://www.jschallenger.com/javascript-dom-exercises/events-and-user-interactions/cursor-enter-leave-event

A continuación se presentan las líneas de código:

 const element = document.querySelector('#element'); const toggleColor = (isEntering) => { element.style.background = isEntering ? 'orange' : 'black'; };

Y se me ocurrieron los siguientes códigos:

 element.addEventListener('mouseenter', toggleColor(true)); element.addEventListener('mouseleave', toggleColor(false));

Pero no funciona y la respuesta correcta es la siguiente:

 element.addEventListener('mouseenter', () => toggleColor(true)); element.addEventListener('mouseleave', () => toggleColor(false));

Aquí, ¿por qué no puedo poner toggleColor(param) directamente en el segundo parámetro de addEventListener? ¿Por qué tengo que poner la función de flecha para llamar a la función toggleColor?

Se agradecería mucho si alguien pudiera explicarlo.