Evenements

Nous allons vous présenter quelques évenements Jquery.

Bind ( type,donnees,fonction )

Permet de lier une action à un évènement particulier. Le gestionnaire d'évènements peut être passé en argument de la fonction à appeler (voir exemple ). Pour arrêter l'action par défaut et le bouillonnement d'évènement, votre fonction doit retourner "false".

$("p").bind("click", function(){
alert( $(this).text() );
});

blur( )

variantes: blur( )blur(fonction)

- la première Déclenche l'évènement qui se produit lorsque l'élément perd le focus. Cela a pour effet de déclencher toutes les fonctions associées à cet évènement pour les élements de la sélection. Pour éviter cette chaine de déclenchement, il surffit d'ajouter un "return false" dans une des fonctions.

- la deuxième Ajoute une fonction associée à l'évènement blur pour les éléments de la sélection.

exemple variante 1 :
$("p").blur();
<p onblur="{alert('test');}" >text</p>
exemple variante 2 :
$("p").blur( function() { alert("test"); } );

change( fonction)

Associe une fonction à l'évènement "change" pour chaque élément spécifié. L'évènement "change" est déclenché lorsque le contrôle est modifié. Par exemple lorsque le contenu d'un objet de formulaire est changé et qu'on quitte cet objet, contrairement a l'évènement "blur" qui est déclenché même si l'objet n'a pas été modifié.

$("#text1").change( function() { alert("test"); } );

click( )

variantes: click( )click(fonction)

- la première Déclenche l'évènement "click" pour chaque élement sélectionné. Toutes les fonctions associées à cet évènement pour les éléments de la sélection seront appelées.

- la deuxième Associe une fonction à l'évènement "click" des élements de la sélection.

exemple variante 1 :
$("p").click();
<p onclick="{alert('test');}" >text</p>
exemple variante 2 :
$("p").click( function() { alert("test"); } );

focus( )

variantes: focus( )focus(fonction)

- la première Déclenche l'évènement de focus sur les élements spécifiés. Toutes les fonctions associées à cet évènement pour les élements de la sélection seront appelées.

- la deuxième Associe une fonction a l'évènement focus pour les éléments de la sélection.

exemple variante 1 :
$("p").focus();
<p onfocus"{alert('test');}" >text</p>
exemple variante 2 :
$("p").focus( function() { alert("test"); } );

keypress( fonction)

Associe une fonction à l'évènement keypress. Cet évènement se déclenche lorsque l'utilisateur maintient une touche du clavier enfoncée.

$("#boutton1").keypress( function() { alert("Test jquery"); } );

Keyup()

Associe une fonction à l'évènement keyup des élements spécifiés. Cet évènement se déclenche lorsque l'utilisteur relache une touche du clavier préalablement enfoncée.

$("#boutton1").keyup( function() { alert("Salut"); } );

Live()

Lie un gestionnaire à un évènement pour les éléments sélectionnés.

Les évènements suportés : click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup.

Les évènements non suportés: blur, focus, mouseenter, mouseleave, change, submit.

Cette fonction est similaire a bind(), mais avec quelques différences :

- live s'applique a tous les éléments repondant au moment de l'appel a la sélection, et a tous ceux qui y répondront par la suite. Par exemple si la fonction cible le click tous les li de la page, live s'appliquera aux li présents. Et si un li est rajouté dans la dom par la suite, alors l'évènement click sur ce nouvel élément sera aussi ciblé. Alors que pour la fonction bind, il faudrait la rééxécuter pour inclure le nouveau li dans la sélection.

- les évènements live ne se propagent pas de la même manière que les évènements traditionnels et ne peuvent être stoppés en utilisant stopPropagation ou stopImmediatePropagation. Par exemple soit deux évènements liés au click, l'un sur "li a" et l'autre sur "li". Un clic sur le lien dans le LI va déclencher les deux évènements. Simplement car l'appel à $("li").bind("click", fn); declenche l'évènement lors d'un click sur un li ou tout élément fils du li.

- Les évènements live ne fonctionnent que lorsqu'ils cible des éléments avec un selecteur. Par exemple, ce code marche:
$ ( "li a").live(...) mais ce code ne marche pas: $ ( "a", someElement).live(...) ni celyui la: $ ( "a »).parent ().live(...).

Pour supprimer les évènements live, vous devez utiliser la méthode die().

$("p").live("click", function(){
$(this).after("<p>un autre paragraphe!<p/>");
});

Load( )

Load(fonction)Load(url,params,callback)

- la première Associe une fonction à l'évènement load des élements de la sélection. Cet évènement se déclenche lorsque l'élément en question se charge.

- la deuxième Charge le code HTML à partir d'un fichier appelé en l'injectant dans la D.O.M. N'utilisez pas cette fonction pour charger des scripts, utilisez plutot $.getScript.

exemple 1:
$("#par").load( function() { alert("Bonjour"); } );
similaire à
<p id ="par" onload="alert('Hello');">Hello</p>
exemple 2:
$("#div_test").load("page.html");
Résultat
<div id ="div-test">contenu page trouvé </div>

Mouseup( )

Associe une fonction à l'évènement "mouseup" pour les éléments de la sélection. Cet évènement se produit lorsque l'utilisteur relache le bouton de la souris.

$("#test").mouseup( function() { alert("Hello"); } );
similaire à
<p id ="test" onmouseup="alert('Hello');">Hello</p>

one ( )

Associe une fonction à un évènement donné. La différence avec la fonction bind() est que la fonction associée a l'évènement ne sera éxécuté au maximum une fois pour chaque élément de la sélection.

$("p").one("click", function(){
alert( $(this).text() );
});

submit( )

variantes: Submit ( )Submit(fonction)

- la première Déclenche l'évènement d'envoi pour chaque élément de la sélection. Toutes les fonctions associées à l'évènement seront éxécutées, ainsi la fonction d'envoi par défaut du naviguateur pour chacun des élements. Cette dernière action par défaut peut être empechée en retournant "false" dans l'une des fonctions associées à l'évènement d'envoi.

- la deuxième Associe une fonction à l'évènement d'envoi des élements spécifiés.

exemple variante 1 :
$("form").submit();
<p onfocus"{alert('test');}" >text</p>
exemple variante 2 :
$("#maform").submit( function() {
return $("#val1").val() ;
});

Trigger ( )

Déclenche un évènement particulier pour les élements de la sélection. Cela va aussi déclencher l'action par défaut du naviguateur pour ce type d'évènement (si elle existe). par exemple, utiliser le type d'évènement 'submit' dans la fonction va aussi déclencher l'envoi du formulaire par le naviguateur. Cette action par défaut peut être empechée en retournant "false" dans une des fonctions associées à l'évènement pour un des élements de la sélection. Vous pouvez également utiliser la fonction bind().

$("#test").trigger("click")
code de test
<p id ="test" click="alert('Hello');">Hello</p>

Vous pouvez consulter Touts les évenments sur le site de Jquery.

On passe maintenant à Ajax de Jquery.