Exécution automatique des fonctions Javascript

Question

Si j'écris l'événement de cette façon, l'action s'exécute quand elle le doit :

 document.getElementById('myElem').onmousedown = (e) => {
     console.log('fired!')
    }

Mais si j'écris la même chose d'une autre manière, l'action s'exécute lorsque la page est chargée, une seule fois :

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent(event)

UPD : Bien sûr, ce n'est qu'un exemple, HandleEvent aura une logique beaucoup plus complexe.

Mes questions sont les suivantes :

1. Pourquoi ?
2. Comment le faire fonctionner correctement ?

Answer 1

document.getElementById('myElem').onmousedown = HandleEvent;

ferait ce que vous voulez ; vous ne devriez pas exécuter le gestionnaire lors de son affectation. Vous devez simplement assigner la référence de la fonction.

Vous pouvez ensuite l'assigner comme gestionnaire de l'événement onload, ou même l'appeler vous-même (si vous ne dépendez pas de l'objet événement).

Answer 2

document.getElementById('myElem').onmousedown = HandleEvent;

Pour passer des arguments supplémentaires, vous pouvez utiliser bind :

document.getElementById('myElem').onmousedown = HandleEvent.bind(null, argument1, argument2);

...ou vous pouvez utiliser une fonction d'usine :

document.getElementById('myElem').onmousedown = createHandler();

function createHandler() {
  var a = calculateA();
  var b = calculateA();
  return function handleEvent() {
     //use a and/or b
  };
}

Il existe aussi d'autres moyens. Le code précis dépendra de votre cas d'utilisation.

Answer 3

Vous n'avez pas besoin de la event .

let HandleEvent = (event) => 'fired!';
document.getElementById('myElem').onmousedown = HandleEvent

Answer 4

Supprimer l'événement

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent

Answer 5

Si vous voulez passer un attribut

let HandleEvent = (event) => {
 console.log('fired!')
}
document.getElementById('myElem').onmousedown = HandleEvent.bind(attribute)