web-dev-qa-db-fra.com

Comment puis-je transmettre des arguments aux gestionnaires d'événements dans jQuery?

Avec un code jQuery comme: 

$("#myid").click(myfunction);

function myfunction(arg1, arg2) {/* something */}

Comment passer des arguments à myfunction lors de l'utilisation de jQuery?

javascriptjquery
83
Edward Wong Hau Pepelu Tivrusk

Le moyen le plus simple est de le faire comme suit (en supposant que vous ne souhaitiez pas que les informations d'événement soient transmises à la fonction) ...

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFiddle .

Cela crée une fonction anonyme, appelée lorsque l'événement click est déclenché. Ceci appelle à son tour myfunction() avec les arguments que vous fournissez.

Si vous souhaitez conserver la ThisBinding (la valeur de this lorsque la fonction est appelée, définissez-la sur l'élément qui a déclenché l'événement), puis appelez la fonction avec call() .

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFiddle .

Vous ne pouvez pas transmettre directement la référence de la manière indiquée dans votre exemple, sinon son unique argument sera l'objet jQuery event .

Si vous voulez passer la référence, vous devez utiliser la fonction proxy() de jQuery (qui est un wrapper inter-navigateurs). pour Function.prototype.bind() ). Cela vous permet de passer des arguments, qui sont liés avant l'argument event.

$("#myid").click($.proxy(myfunction, null, arg1, arg2));

jsFiddle .

Dans cet exemple, myfunction() serait exécuté avec son ThisBinding intact (null n'étant pas un objet, la valeur normale this de l'élément qui a déclenché l'événement est utilisée), ainsi que les arguments (dans l'ordre) arg1, arg2 et enfin l'objet jQuery event, que vous pouvez ignorer s'il n'est pas requis (ne le nommez même pas dans les arguments de la fonction).

Vous pouvez également utiliser event de l'objet jQuery data pour transmettre des données, mais cela nécessiterait de modifier myfunction() pour y accéder via event.data.arg1 (qui ne sont pas arguments de la fonction , comme le mentionne votre question), ou au moins introduire une fonction de proxy manuelle comme dans le premier exemple ou générée en utilisant le dernier exemple.

107
alex
$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction);

function myfunction(e) {

    var arg1 = e.data.arg1;
    var arg2 = e.data.arg2;

    alert(arg1);
    alert(arg2);

}

//call method directly:
myfunction({
    arg1: 'hello agian', 
    arg2: 'bye again'
});

Vous permet également de lier et de dissocier des gestionnaires d'événements spécifiques à l'aide des méthodes on et off.

Exemple:

$("#myid").off('click', myfunction);

Cela détacherait le gestionnaire myfunction de #myid

62
George Filippakos

bien que vous devriez certainement utiliser la réponse d'Alex, la méthode "bind" de la bibliothèque prototype a été normalisée dans Ecmascript 5 et sera bientôt implémentée dans les navigateurs de manière native. Cela fonctionne comme ceci:

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));
11
Breton

Vieux fil, mais à des fins de recherche; essayer:

$(selector).on('mouseover',...);

... et consultez le paramètre "data": http://api.jquery.com/on/

par exemple.:

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );
5
dhc

Simple: 

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}
1
T.Todua