11486 sujets

JavaScript, DOM et API Web HTML5

Syntaxe de click que je ne comprends pas (JQuery)

Bonjour,

je suis actuellement un tuto sur Jquery et pour expliquer la méthode trigger(), l'auteur donne un exemple de programme qui comporte cette ligne que je ne suis pas sur de comprendre :

$('img').click(function(event,texte)


est ce que cette ligne fait bien référence à cette façon d'écrire click qui est ici : http://api.jquery.com/click/#click-handler

Dans ce cas je ne comprends pas, il y a une virgule dans l'exemple, mais pas dans la doc. Ou alors je ne regarde pas où il faut ?

C'est sûrement un truc tout bête, mais ça me tracasse un peu pour avancer. Merci d'avance de vos réponses.
salut,
"Event" fait référence à un objet qui est passé automatiquement à la fonction traitant l'évènement, lorsque cet évènement se déclenche.

C'est à dire que si par exemple tu appelles une fonction nommé "maFonction" pour traiter un clic: 

function maFonction(){
    // ...
}
$('img').click(maFonction);

celle-ci contiendra automatiquement un argument qui fait référence à l'objet "Event".
Sur certains navigateurs (comme Chrome par ex), on peut faire appel à cet objet sans le récupérer via un argument :

function maFonction(){
    event.target      // target étant une propriété de l'objet Event
}
$('img').click(maFonction);

sur d'autres, il faut le récupérer d'abord

function maFonction(event){
    event.target
}
$('img').click(maFonction);



function maFonction(e){
    e.target
}
$('img').click(maFonction);



function maFonction(nom_quelconque){
    nom_quelconque.target
}
$('img').click(maFonction);


Par contre si tu dois passer des arguments à la fonction traitant l'évènement, tu dois récupérer l'objet Event en dernier (l'ordre des arguments compte). Je ne sais pas trop si s'applique aussi à JQuery (je ne maîtrise pas du tout).
Bonjour Zelalsan,

Merci de ta réponse mais je ne suis pas sur d'avoir tout compris dans ton explication.
J'affiche le code complet de l'exemple de l'auteur du tuto : 
Cliquez sur l'image<br />
<img src="bon.gif"><br />
<span id='message'></span><br />
<button>Cliquez ici</button>
<script src="jquery.js"></script>
<script>
$(function() {
$('img').click(function(event,texte) {
if (texte == undefined)
texte = "par vous";
$('#message').text('L\'image a été cliquée ' + texte).fadeIn(1000).fadeOut(1000);
});
$('button').click(function() {
$('img').trigger('click', 'par jQuery');
});
});
</script>


De ce que j'ai compris, pour passer des paramètres custom à un trigger (ici 'par jQuery'), il faut d'abord définir ce(s) paramètre(s) en amont dans la méthode évènementielle que déclenchera le trigger, et pour cela on va utiliser une fonction que l'on passe en paramètre à cette méthode évènementielle, et dans cette fonction, on définit comme arguments un objet Event, et ensuite des paramètres custom, c'est ça ?
Alors... Avec le code complet j'ai l'impression qu'on ne parle pas du même "event". Je serais même tenter d'en être sûr. Encore une fois, je ne travaille pas avec JQuery donc je te parlais en rapport à du JS pure.
D'après ce que j'ai pu comprendre, dans l'exemple que tu donnes, il ne doit pas s'agir de l'objet Event qui est passé en paramètre.

Ici, tu définies une fonction à exécuter au clic de l'image

function(event,texte) {
if (texte == undefined)
texte = "par vous";
$('#message').text('L\'image a été cliquée ' + texte).fadeIn(1000).fadeOut(1000);
}

Puis plus bas, tu simules un clic sur l'image après qu'on ait cliqué sur un bouton

$('button').click(function() {
$('img').trigger('click', 'par jQuery');
});

C'est à dire que tu demandes à JQuery de déclencher l'évènement "click" sur les éléments <img> et ce, même si c'est sur un bouton que tu as cliqué.

Bon après avoir écrit tout ça j'ai eu l'idée de voir la doc. Je pense que ça confirme à peu près ce que j'ai dit.
Pour les arguments custum, il faut apparemment les passer sous forme de tableau en second paramètre.
On retrouve les arguments de la fonction (event et texte) dans le trigger ensuite avec 'click' et 'par jQuery', je pense ...

J'ai contacté l'auteur du tuto, j'espère qu'il me répondra, car tout ça est plus ou moins nébuleux pour moi.
Zelalsan a bien compris le principe du code.

En gros, quand tu cliques sur <button>, tu vas comme simuler un clic sur <img> (et va envoyer un paramètre en texte à l'événement).

Et lorsque que tu cliques sur <img> (directement ou via la "simulation" du trigger), l'event click() va te sortir un message te précisant si tu as directement cliqué sur l'image, ou justement si c'est jQuery qui a simulé le clic.

J'espère avoir été clair moi aussi. Smiley confused
Bonjour à tous,

oui le principe du code c'est bien ça, mais ma question portait en fait sur la manière de l'écrire, dont cette ligne "$('img').click(function(event,texte) {" où l'on passe en argument de click une fonction qui possède des paramètres.
Je voulais que la doc de jquery en parle de manière plus détaillée mais je n'ai aps trouvé, j'attends la réponse de l'auteur afin de savoir si j'ai bien compris, à savoir : pour passer des paramètres custom à un trigger (ici 'par jQuery'), il faut d'abord définir ce(s) paramètre(s) en amont dans la méthode évènementielle que déclenchera le trigger, et pour cela on va utiliser une fonction que l'on passe en paramètre à cette méthode évènementielle, et dans cette fonction, on définit comme arguments un objet Event, et ensuite des paramètres custom.
resalut,
la doc en parle pourtant clairement.
D'abord il ne s'agit pas de l'objet Event mais d'un paramètre propre à JQuery.
Ensuite, pour passer des arguments custum, il faut le faire après l'argument "event" et sous forme de tableau:

$('img').click(function(event,[arg1, arg2, arg3]) //...

Je suppose que JQuery permet de ne pas passer par un tableau lorsqu'il s'agit d'un argument unique, comme dans ce cas.
"Je suppose que JQuery permet de ne pas passer par un tableau lorsqu'il s'agit d'un argument unique, comme dans ce cas."

C'est exact :
"As of jQuery 1.6.2, single string or numeric argument can be passed without being wrapped in an array."
Sujet clos
Aller à