Pourquoi le gestionnaire d'événements Javascript fonctionne-t-il avec des parenthèses?

Gourous Javascript, regardez ce code:

<button onclick="handler()">ClickMe</button> <script> function handler() { alert("clicked"); } </script>

Pourquoi l'événement onclick doit être affecté au gestionnaire avec () onclick = "handler ()"? Dans ce cas, l'alerte est appelée. Mais selon la logique décrite comme réponse à une question similaire https://stackoverflow.com/a/3247044/2543590 onclick assigné au résultat du gestionnaire de fonctions, pour ne pas fonctionner lui-même. Je crois assigner onclick pour fonctionner, il devrait être comme ça

 onclick="handler",

Mais dans ce cas, l'alerte n'est pas appelée. Pourquoi?

Inline JS

Lorsque vous effectuez un gestionnaire onclic en ligne comme celui-ci, vous attribuez une expression Javascript pour l'exécuter. Vous devez donc exécuter la fonction.

L'expression pourrait aussi facilement être onclick="handler();alert(2)" auquel cas il est évident que la fonction doit être appelée, tout comme si elle serait exécutée à partir d'un fichier javascript.

Relier une fonction à l'événement de clic

Si, au lieu de cela, vous attachez l'événement de clic avec javascript, vous lieriez une fonction, vous devez donc passer l'objet de fonction.

 var btn = document.getElementById("btn"); btn.addEventListener("click",handler);

addEventListener définit l'objet fonction pour être lié à l'événement afin qu'il s'exécute lorsque l'événement est déclenché. Comme vous spécifiez un objet fonction, plutôt qu'une expression de chaîne, les parenthèses ne sont pas nécessaires. En fait, si vous les avez ajoutés, la fonction s'exécuterait immédiatement et la valeur de retour de la fonction serait liée à l'événement.

Meilleure pratique

En général, la plupart des gens recommanderaient de lier des événements en javascript en liant un gestionnaire de fonctions plutôt que d'utiliser JS en ligne. Il est plus facile de déboguer, ne lie pas trop votre logique au DOM et est plus flexible pour les pages dynamiques. Cela vous oblige également à prendre toutes les fonctions que vous appellez global.

Résumé

La clé est l'attribut attribué à une chaîne évaluée comme une expression JS, elle n'est pas la même que lier un objet fonction à l'événement.

Parce que onclick="handler" n'est pas JavaScript. C'est un attribut de votre balise. Oui, si c'était JavaScript, vous pourrez passer la fonction elle-même, mais ce n'est pas le cas; Vous affectez une déclaration à exécuter en cliquant sur.

La déclaration exécutée par onclick="handler" essentiellement ceci:

 <script> handler; </script>

IE, rien.

Tout on atouts sur les éléments définitivement en ligne Javascript, pas un gestionnaire. Vous êtes donc en train d'exécuter le code là-bas, dans ce cas, un appel de fonction. Si vous laissez les parenthèses, c'est juste un code invalide.

Comparer:

 <button onclick="alert('click!')">Click me!</button>

Tout ce que vous mettez sur onclick="" sera enveloppé d'une fonction implicite. C'est le gestionnaire d'événements réel qui sera appelé en cliquant, tout appel de fonction à l'intérieur nécessite les parenthèses.