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

Avec du code jQuery comme:

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

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

Comment puis-je passer des arguments à myfunctiontout en utilisant jQuery?

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

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

jsFiddle .

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

Si vous souhaitez conserver ThisBinding(la valeur du thismoment où la fonction est appelée, définie sur l'élément qui a déclenché l'événement), appelez la fonction avec call().

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

jsFiddle .

Vous ne pouvez pas passer la référence directement comme l'indique votre exemple, ou son seul argument sera l' objet jQueryevent .

Si vous ne voulez passer la référence, vous devez tirer parti de jQuery proxy()fonction ( ce qui est un wrapper croix navigateur pour Function.prototype.bind()). Cela vous permet de passer des arguments, qui sont liés avant l' eventargument.

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

jsFiddle .

Dans cet exemple, myfunction()serait exécuté avec son ThisBindingintact ( nulln'est pas un objet, donc la thisvaleur normale de l'élément qui a déclenché l'événement est utilisée), avec les arguments (dans l'ordre) arg1, arg2et enfin l' eventobjet jQuery , que vous pouvez ignorer si ce n'est pas obligatoire (ne le nommez même pas dans les arguments de la fonction).

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

$("#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 dissocierait le gestionnaire myfunction de #myid

alors 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 en natif dans les navigateurs. Cela fonctionne comme ceci:

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

Ancien 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 );

Il y a déjà d'excellentes réponses, mais de toute façon, voici mes deux cents. Vous pouvez aussi utiliser:

$("#myid").click({arg1: "foo", arg2: "bar"}, myfunction)

Et l'auditeur ressemblerait à:

function myfunction(event){ alert(event.data.arg1); alert(event.data.arg2); }

Facile:

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

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