La situation ressemble un peu à
var someVar = some_other_function();
someObj.addEventListener("click", function(){
some_function(someVar);
}, false);
Le problème est que la valeur de someVar
n'est pas visible dans la fonction d'écoute de la addEventListener
, où elle est probablement traitée comme une nouvelle variable.
javascript
dom
addeventlistener
Abhishek Yadav
la source
la source
Réponses:
Il n'y a absolument rien de mal avec le code que vous avez écrit. Les deux
some_function
etsomeVar
devraient être accessibles, au cas où ils étaient disponibles dans le contexte où anonymea été créé.
Vérifiez si l'alerte vous donne la valeur que vous recherchez, assurez-vous qu'elle sera accessible dans le cadre de la fonction anonyme (sauf si vous avez plus de code qui fonctionne sur la même
someVar
variable à côté de l'appel àaddEventListener
)la source
bound function
utilisant la.bind()
méthode résoudra le problème avec les boucles developer.mozilla.org/en/docs/Web/JavaScript/Reference/…Pourquoi ne pas simplement récupérer les arguments de l'attribut cible de l'événement?
Exemple:
JavaScript est un langage orienté prototype, rappelez-vous!
la source
evt.currentTarget.myParam
? S'il y a un autre élément à l'intérieur de 'someInput', ilevt.target
peut s'agir de l'élément interne. ( jsfiddle.net/qp5zguay/1 )this
! L'utilisation de cette méthode en tapuscrit nécessite cependant que l'élément soitany
ou fasse un sous-type.addEventListener
c'est pourdocument
,evt.target.myParam
ça n'a pas marché pour moi. J'ai dû utiliser à laevt.currentTarget.myParam
place.Cette question est ancienne mais je pensais offrir une alternative en utilisant .bind () d'ES5 - pour la postérité. :)
Sachez simplement que vous devez configurer votre fonction d'écoute avec le premier paramètre comme argument que vous passez dans bind (votre autre fonction) et le deuxième paramètre est maintenant l'événement (au lieu du premier, comme il l'aurait été) .
la source
Function.prototype.bind()
vous ne pouvez pas supprimer l'écouteur d'événements , mieux vaut utiliser une fonction de curry à la place (voir la réponse @ tomcek112)some_other_func
est une variable, vous pouvez transmettre la valeur que vous souhaitezsome_func
.Vous pouvez simplement lier tous les arguments nécessaires avec 'bind':
De cette façon , vous aurez toujours la
event
,arg1
et d' autres choses à passermyPrettyHandler
.http://passy.svbtle.com/partial-application-in-javascript-using-bind
la source
.bind()
mais sans le null comme premier param. qui n'a pas fonctionné.null
, ça marche très bien avec.bind(event, arg1)
, au moins avec VueJS.Assez et vieille question, mais j'ai eu le même problème aujourd'hui. La solution la plus propre que j'ai trouvée est d'utiliser le concept de curry.
Le code pour cela:
En nommant la fonction curry, elle vous permet d'appeler Object.removeEventListener pour désenregistrer eventListener lors d'une exécution ultérieure.
la source
Vous pouvez ajouter et supprimer des écouteurs d'événements avec des arguments en déclarant une fonction en tant que variable.
myaudio.addEventListener('ended',funcName=function(){newSrc(myaudio)},false);
newSrc
est la méthode avec myaudio comme paramètrefuncName
est la variable de nom de fonctionVous pouvez supprimer l'auditeur avec
myaudio.removeEventListener('ended',func,false);
la source
Vous pouvez passer une valeur par valeur (et non par référence) via une fonctionnalité javascript appelée fermeture :
Ou vous pouvez écrire une fonction d'habillage courante telle que
wrapEventCallback
:Voici
wrapEventCallback(func,var1,var2)
comme:la source
someVar
La valeur ne doit être accessible que dans lesome_function()
contexte, pas à partir de l'auditeur. Si vous aimez l'avoir dans l'auditeur, vous devez faire quelque chose comme:et utilisez à la
newVar
place.L'autre façon est de renvoyer la
someVar
valeur desome_function()
pour l'utiliser davantage dans l'écouteur (en tant que nouvelle variable locale):la source
Voici encore une autre façon (celle-ci fonctionne à l'intérieur pour les boucles):
la source
Function.prototype.bind () est le moyen de lier une fonction cible à une portée particulière et éventuellement de définir l'
this
objet dans la fonction cible.Ou pour capturer une partie de la portée lexicale, par exemple dans une boucle:
Enfin, si le
this
paramètre n'est pas nécessaire dans la fonction cible:la source
Utilisation
Et si vous souhaitez transmettre une valeur personnalisée à cette fonction anonyme, la façon la plus simple de le faire est
Fonctionne parfaitement dans mon projet. J'espère que cela vous aidera
la source
for
boucle.C'est ainsi que l'événement s'est déroulé correctement.
la source
L'envoi d'arguments à la fonction de rappel d'un eventListener nécessite la création d'une fonction isolée et la transmission d'arguments à cette fonction isolée.
Voici une jolie petite fonction d'aide que vous pouvez utiliser. Basé sur l'exemple "bonjour le monde" ci-dessus.)
Une chose qui est également nécessaire est de maintenir une référence à la fonction afin que nous puissions supprimer l'auditeur proprement.
la source
storeFunc
doit être votre variable ref. Mettez votre suppression d'auditeur dans un effet comme celui-ci et vous êtes prêt à partir:useEffect(() => { return () => { window.removeEventListener('scroll', storeFunc, false); } }, [storeFunc])
Une façon de faire cela avec une fonction externe :
Cette méthode d'encapsuler une fonction anonyme entre parenthèses et de l'appeler immédiatement est appelée IIFE (expression de fonction immédiatement invoquée)
Vous pouvez consulter un exemple avec deux paramètres dans http://codepen.io/froucher/pen/BoWwgz .
la source
Si je ne me trompe pas, l'utilisation de l'appel de la fonction avec
bind
crée en fait une nouvelle fonction qui est retournée par labind
méthode. Cela vous posera des problèmes plus tard ou si vous souhaitez supprimer l'écouteur d'événements, car il s'agit essentiellement d'une fonction anonyme:Alors, gardez cela à l'esprit.
Si vous utilisez ES6, vous pouvez faire la même chose que suggéré, mais un peu plus propre:
la source
belle alternative à une ligne
la source
Essayez également ces derniers (IE8 + Chrome. Je ne sais pas pour FF):
J'espère qu'il n'y a pas de fautes de frappe :-)
la source
J'étais coincé dans cela car je l'utilisais en boucle pour trouver des éléments et y ajouter un listeur. Si vous l'utilisez en boucle, cela fonctionnera parfaitement
la source
En 2019, beaucoup de changements dans l'API, la meilleure réponse ne fonctionne plus, sans correction de bug.
partager du code de travail.
Inspiré par toutes les réponses ci-dessus.
la source
Il y a une variable spéciale à l'intérieur de toutes les fonctions: les arguments . Vous pouvez passer vos paramètres en tant que paramètres anonymes et y accéder (par ordre) via la variable arguments .
Exemple:
la source
la source
L'approche suivante a bien fonctionné pour moi. Modifié à partir d' ici .
la source
La réponse suivante est correcte mais le code ci-dessous ne fonctionne pas dans IE8 si supposons que vous avez compressé le fichier js à l'aide de yuicompressor. (En fait, la plupart des peuples américains utilisent encore IE8)
Donc, nous pouvons résoudre le problème ci-dessus comme suit et cela fonctionne bien dans tous les navigateurs
J'espère que cela serait utile pour quelqu'un qui compresse le fichier js dans un environnement de production.
Bonne chance!!
la source
Le code suivant a bien fonctionné pour moi (Firefox):
Production:
la source
Vous avez besoin:
la source
Probablement pas optimal, mais assez simple pour ceux qui ne sont pas super avertis. Placez la fonction qui appelle addEventListener dans sa propre fonction. De cette façon, toutes les valeurs de fonction qui y sont passées conservent leur propre étendue et vous pouvez parcourir cette fonction autant que vous le souhaitez.
Exemple J'ai travaillé avec la lecture de fichiers car j'avais besoin de capturer et de rendre un aperçu de l'image et du nom de fichier. Il m'a fallu un certain temps pour éviter les problèmes asynchrones lors de l'utilisation d'un type de téléchargement de fichiers multiples. Je verrais accidentellement le même «nom» sur tous les rendus malgré le téléchargement de fichiers différents.
À l'origine, toute la fonction readFile () se trouvait dans la fonction readFiles (). Cela a provoqué des problèmes de portée asynchrone.
la source
voudrais juste ajouter. si quelqu'un ajoute une fonction qui met à jour les cases à cocher vers un écouteur d'événements, vous devrez utiliser
event.target
au lieu dethis
mettre à jour les cases à cocher.la source
J'ai une approche très simpliste. Cela peut fonctionner pour d'autres car cela m'a aidé. C'est ... Lorsque vous avez plusieurs éléments / variables affectés à une même fonction et que vous souhaitez passer la référence, la solution la plus simple est ...
C'est tout. Ça a marché pour moi. Si simple.
la source
Autre alternative, peut-être pas aussi élégante que l'utilisation de bind, mais elle est valable pour les événements en boucle
Il a été testé pour les extensions google chrome et peut-être que e.srcElement doit être remplacé par e.source dans d'autres navigateurs
J'ai trouvé cette solution en utilisant le commentaire publié par Imatoria mais je ne peux pas la marquer comme utile car je n'ai pas assez de réputation: D
la source
Cette solution peut être bonne pour la recherche
ou lier des valeurs sera également bon
la source