Dev Faq
12
votes

Comment puis-je exécuter une fonction externe lorsqu'un élément est cliqué?

J'essaie d'exécuter une fonction externe en cliquant sur un élément DOM sans l'envelopper dans une autre fonction.

Dis avoir une fonction appelée Sayhello () , comme suit: xxx

Pour l'exécuter en cliquant, je dois actuellement le faire: xxx

avis je suis obligé d'envelopper la seule fonction appelez encore une autre fonction. Ce que j'essaie de faire est quelque chose comme ça xxx

sauf que cela ne fonctionne tout simplement pas. Puis-je éviter d'envelopper l'appel de fonction unique dans une autre fonction de quelque manière que ce soit? Merci!

.

Informations supplémentaires: Comment devrais-je réaliser la même chose quand je dois passer des paramètres à la fonction?

..

Informations supplémentaires: Comme Chris Brandsma et Jani Hartikainen ont souligné, il convient de pouvoir utiliser la fonction de liaison pour passer des paramètres à la fonction sans l'envelopper dans une autre fonction anonyme en tant que telle: xxx

avec Sayhello () Accepter désormais un nouveau paramètre, comme tel: xxx

Ceci, malheureusement, ne semble pas fonctionner ... des idées? La documentation d'événements / Bind est située ici Merci!

2 commentaires

Quel est votre boeuf avec des fonctions d'emballage? Ce n'est pas une performance touchée (bien, nanosecondes peut-être). C'est un peu verbeux mais je trouve utile de le faire et de garder tout ce qui est cohérent. La seconde, vous devez ajouter un paramètre ou appeler plusieurs fonctions dont vous aurez besoin d'ajouter le wrapper dans ...

Je suppose que je veux juste l'avoir bien en une ligne et je suis OCD comme ça ... :)

6 Réponses :

8
votes

Vous appelez la fonction Sayhello, vous pouvez le transmettre en référence en supprimant la parenthèse: xxx

éditer: Si vous avez besoin de passer des paramètres à la Sayhello-fonction, vous devrez envelopper une autre fonction. Cela définit une nouvelle fonction de paramètres qui appelle votre fonction avec les paramètres fournis au temps de création: xxx

3 commentaires

Cela fonctionne réellement, mais que dois-je faire dans une situation où j'ai des paramètres à passer à la fonction? c'est-à-dire $ ("# myelement"). Cliquez sur (Sayhello ("John")); ? Merci!

Dans ce cas, vous êtes obligé de l'envelopper. Alternativement, certaines bibliothèques comme le prototype fournissent une méthode BIND () qui fonctionne comme Sayhello.Bind (ceci, param1, param2). Cela fait exactement la même chose que l'enveloppant cependant.

Hey Jani, il semble que cela fonctionne aussi avec la fonction de liaison de JQuery, mais ce n'est pas le cas. Veuillez consulter les informations supplémentaires à la question. Merci!

4
votes

$ ("# myelement"). Cliquez sur (Sayhello ());

Ceci appelle en réalité Sayhello () Avant de définir le Cliquez sur Handler. Il essaie de définir la valeur de retour de Sayhello () comme fonction de rappel!

plutôt, essayez: xxx

et En ce qui concerne votre édition, si vous avez besoin de passer des paramètres, vous pouvez simplement utiliser la technique de fermeture que vous utilisez déjà, mais si vous recherchez quelque chose de nettoyant, découvrez Comment puis-je transmettre une référence à une fonction, avec des paramètres?

0 commentaires
0
votes

Oui, au lieu de passer Sayhello (), il suffit de passer le nom de la fonction. xxx

0 commentaires
21
votes

Pour ramasser à une question que vous avez eue là-bas.

Évidemment, vous devez l'appeler de cette façon de travailler: p> xxx pré>

l'appelant comme vous l'avez Il exécute en fait la méthode au lieu d'envoyer la méthode dans le gestionnaire de clic. p>

Si vous devez passer des données, vous pouvez également appeler la méthode de cette façon: p> 

$("#myelement").click(function(){sayHello($(this).attr("hasData");});.

4 commentaires

Il découle de la documentation "Événements / Bind" sur le site Web de JQuery que ce $ ("# myelement"). Bind ("Cliquez sur", "Tom", Sayhello); devrait réellement faire ce que je cherche ... sur l'essayer cependant, cela ne semble pas fonctionner. Je posterai quelques informations supplémentaires dans la question initiale dans une seconde

@YUVAL: Lisez les docs plus attentivement! La valeur transmise à Bind () dans le paramètre DATA est transmis à votre gestionnaire via event.data - Vous devez interpréter le premier paramètre à Votre fonction sous forme d'objet d'événement et consultez la propriété DATA !

@yuval: J'ai développé l'exemple de Chris.

@ Shog9: parfait! Cela rend beaucoup plus clair. Il est certainement plus facile d'entendre un appel de fonction contenant des paramètres dans une fonction anonyme, cependant! Merci pour votre aide!

1
votes

Quels paramètres seraient-ils en train de passer au moment du clic? Si vous savez ce qu'elles sont à l'avance, vous pouvez les définir avant que l'utilisateur clique sur.

Vous ne pouvez pas réussir les paramètres, mais vous pouvez simuler la chose du paramètre en ajoutant simplement des membres à l'objet qui tire l'événement, alors .. xxx

puis, lorsque vous appelez cette xxx

2 commentaires

Pas une réponse directe à la question (puisqu'il utilise JQuery), mais suscitait néanmoins une excellente pointe JavaScript.

IMHO, c'est beaucoup moins propre qu'une fermeture simple ... Au mieux, vous avez le travail supplémentaire de fixation des propriétés d'expansion sur l'objet DOM et, au pire, vous pourriez potentiellement rencontrer des collisions de nommage avec des propriétés intégrées!

1
votes

La méthode Bind () code> est désormais obsolète.

AS de JQuery 3.0, .bind () code> a été obsolète. Il a été remplacé par la méthode () code> pour joindre des gestionnaires d'événements à un document depuis JQuery 1.7, son utilisation était donc déjà découragée. p> BlockQuote>

Vous ferez mieux de faire tout événement contraignant avec le sur () code> méthode de cohérence. Vous pouvez transmettre des paramètres à votre gestionnaire comme deuxième argument après le nom de l'événement. P> 

function sayHello(name){
    console.log('Hello ' + name);
};

$('#myelement').on('click', 'John', sayHello);

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO