J'ai une liste d'éléments dans mon HTML qui ressemble à ceci: et j'essayais de le faire afin que chaque élément que j'ai cliqué sur la console soit connecté à la console l'animal l'élément. C'était ma tentative: mais il ne renvoyait rien quand j'ai cliqué sur l'un des éléments. Cependant, une fois que j'ai changé l'événement, il a commencé à travailler: Pourquoi fonctionne-t-il dans la deuxième version du code et non le premier? Dans la première version, je pensais que je suis en train de passer l'argument de l'élément à la fonction de sélection de choix en écrivant "choix de choix (élément)", mais apparemment, cela ne fonctionne que s'il y a "() =>" devant celui-ci, mais quelle est la différence Dans cette notation? Merci.
3 Réponses :
Dans la première version, vous exécutez la fonction code> CapeSelection code> au lieu de transmettre sa référence, le mais depuis que vous avez passé la valeur de retour de la fonction code> de la fonction code> qui est dans la deuxième version, vous passez en réalité la référence de fonction au Ce suivant fonctionnerait également, en passant simplement la référence AddeventListener CODE> strong> s'attend à une référence de fonction comme rappel lorsque l'événement particulier est" em> déclenché em>. non définie code> (car vous ne retournez rien à partir de la section de choix code> par défaut Il renvoie non défini code>) il ne fonctionne pas. p> AddeventListner code>, qui est une flèche Syntaxe de fonction. P> Capselection code>, mais cette fois, il recevra la Evénement code> strong> objet. P>
<div class='container'>
<div class="zone green">🦊</div>
<div class="zone red">ðŸ°</div>
<div class="zone blue">ðŸ¸</div>
<div class="zone yellow">ðŸ¦</div>
<div class="zone purple">ðŸ¯</div>
<div class="zone brown">ðŸ</div>
<div class="zone green">🦄</div>
<div class="zone red">ðŸ²</div>
<div class="zone blue">ðŸ·</div>
<div class="zone yellow">ðŸº</div>
<div class="zone purple">ðŸ¼</div>
<div class="zone brown">ðŸ»</div>
</div>
Je comprends maintenant, merci beaucoup! Mais une autre question que j'ai, dans la deuxième version, quand elle est écrite: "() => Pickselection (élément)", ne devrait-il pas les parenthèses vides d'avoir un paramètre à l'intérieur d'eux? Parce que dans la syntaxe de fonction arrow ne () => signifie que la fonction ne prend aucun argument? Mais dans le cas de la fonction de sélection de choix, il faut un argument.
La fonction flèche => est en fait le rappel qui est appelé lorsque l'événement se produit, qui appellera à son tour la fonction pickselection et passez la fonction < code> élément . Il faut généralement prendre un argument qui est l'objet , comme: (événement) => Capselection (élément); qui est en option . Mais puisque vous passez déjà la variable locale ELEMENT à PICKSELECTION TEL COMMANDER COMME ASTUE.
Cette ligne est effectivement ce p> ce que vous voulez est p> Voyez-vous la différence? p> dans cette version p> vous avez appelé la fonction Ce que vous vouliez / nécessaire à faire est de passer la fonction elle-même à La raison pour laquelle cette version fonctionne p> est parce que vous passez une fonction anonyme à note fonctionnellement, il existe une autre différence. P> dans celui-ci p> Le clic événement passe un Objet d'événement à Pour obtenir le premier à travailler, vous avez vraiment besoin de cet exemple p> exemple: p> p> pickselection code> et est passée élément code>. Puis transmis ce que pickselection code> retourne sur élément.addeventlistener code> p> element.addeventlistener p> élément.addeventlistener code> . Ces lignes peuvent être traduites à cette lettre p> Capselection Code> alors que dans l'autre la variable élément code> créé lorsque foreach code> appelé anonmousfn1 a été "fermé sur" Fermeture (Mode de fermeture a été faite) donc lorsque Anonymousfn2 a été appelé que élément code> était utilisé.
<div class='container'>
<div class="zone green">🦊</div>
<div class="zone red">ðŸ°</div>
<div class="zone blue">ðŸ¸</div>
<div class="zone yellow">ðŸ¦</div>
<div class="zone purple">ðŸ¯</div>
<div class="zone brown">ðŸ</div>
<div class="zone green">🦄</div>
<div class="zone red">ðŸ²</div>
<div class="zone blue">ðŸ·</div>
<div class="zone yellow">ðŸº</div>
<div class="zone purple">ðŸ¼</div>
<div class="zone brown">ðŸ»</div>
</div>
Sidenote: Enregistrement d'un auditeur sur chaque élément est une mauvaise pratique. Utilisez la délégation d'événement à la place:
p>
<div class='container'> <div class="zone green">🦊</div> <div class="zone red">ðŸ°</div> <div class="zone blue">ðŸ¸</div> <div class="zone yellow">ðŸ¦</div> <div class="zone purple">ðŸ¯</div> <div class="zone brown">ðŸ</div> <div class="zone green">🦄</div> <div class="zone red">ðŸ²</div> <div class="zone blue">ðŸ·</div> <div class="zone yellow">ðŸº</div> <div class="zone purple">ðŸ¼</div> <div class="zone brown">ðŸ»</div> </div>
Pour la liste des événements, vous devriez transmettre une méthode de réfrence. En second lieu, vous le faites correctement. Mais dans le premier cas, vous passez indéfini (quels retours à partir de l'appel de méthode de choix de choix) .Pritst doit être
Fonction () {PickSelection (). élément)}