Gestion des évènements JQuery

Cette page est propulsée par


Cette page Webjax vous présente les fonctionnalités JQuery qui vous de gérer des évènements, qui vous permettent d'en savoir plus sur la structure des propriétés et des fonctions qui sont utilisés pour cela, tout cela pouvant fonctionner "cross-browser" c'est à dire sous tous les navigateurs.



#00 :: Chargement de la page , Page Load: #01 :: Attraper, Manipuler les évènements , Event Handling: #02 :: Aides à l'interaction , Interaction Helpers: #03 :: Evènements gérés par JQuery , Event Helpers:

00 :: Chargement de la page , Page Load:

ready( fn )

Cette instruction permet de déterminer si le modèle DOM de la page a bien été chargé et qu'il peut bien faire l'objet de manipulations, modifications.
Notez que l'exemple présenté ci après ne représente pas vraiment le type d'exemple concret de cette instruction. L'utilisation concrète de cette instruction pourrait être notamment de vérifier le modèle DOM au chargement de la page afin de déterminer si l'on peut exécuter des fonctionnalités AJAX de chargement de contenu.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

ready( fn )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$(document).ready(function(){ $("#myTest00 p").text("Le modèle DOM a bien été chargé et peut être manipulé."); });

01 :: Attraper, Manipuler les évènements , Event Handling:

bind( type, [data], fn )

Cette instruction très puissante permet d'attacher des évènements à un élément ou un set d'éléments matchés.
Voici les valeurs disponibles pour le premier argument de l'instruction :

• blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

Vous pouvez tester l'exemple en utilisant le formulaire ci après :

bind( type, [data], fn )

Tester le sélecteur :

Cliquez ou double-cliquez pour faire apparaître des informations rattachés au click/doubleclick, JQuery ca pète

Cliquez ou double-cliquez pour faire apparaître des informations rattachés au click/doubleclick, Webjax c'est fun

Le code source de cet exemple est ci après présenté :
$("#myTest01 p").bind("click", function(e){ var str = "( " + e.pageX + ", " + e.pageY + " )"; $("#myTest01 span").text("Un click a été effectué! " + str); }); $("#myTest01 p").bind("dblclick", function(){ $("#myTest01 span").text("Un double click a été effectué dans un élément " + this.tagName); }); $("#myTest01 p").bind("mouseenter mouseleave", function(e){ $(this).toggleClass("over"); });

one( type, data, fn )

Cette instruction permet d'attacher un ou plusieurs évènements à un set d'éléments matchés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

one( type, data, fn )

Tester le sélecteur :

Cliquez un carré pour confirmer que JQuery ca pète et que Webjax aussi ...

Le code source de cet exemple est ci après présenté :
var n02 = 0; $("#myTest02 div").one("click", function(){ var index = $("#myTest02 div").index(this); $(this).css({ borderStyle:"inset",cursor:"auto" }); $("#myTest02 p").text("La div d'index #" + index + " a fait l'objet d'un click." + " Au total " + ++n02 + " clicks ont été effectué."); });

trigger( type, data )

Cette instruction permet de déclencher un évènement sur un set d'éléments DOM sélectionnés.
Cela se traduira par défaut dans le déclenchement de l'action rattaché à l'évènement par le navigateur.
Par exemple si vous passez "submit" à "trigger()", le navigateur validera et "submitera" le formulaire.
Cette action par défaut peut être contournée en retournant "false" depuis l'une des fonctions rattachées à l'élément.

Référez vous à la documentation officielle en version anglaise de JQuery pour plus d'informations sur cette instruction en cliquant ici.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

trigger( type, data )

Tester le sélecteur :

Bouton #1 Bouton #2

le bouton #1 a été cliqué 0 fois.

le bouton #2 a été cliqué 0 fois.

Le code source de cet exemple est ci après présenté :
$("#myTest03 button:first").click(function () { update03($("#myTest03 span:first")); }); $("#myTest03 button:last").click(function () { $("#myTest03 button:first").trigger('click'); update03($("#myTest03 span:last")); }); function update03(j) { var n = parseInt(j.text(), 0); j.text(n + 1); }

triggerHandler( type, [data] )

Cette méthode permet déclencher un évènement sans le déclencher réellement à l'inverse de "trigger()".

Référez vous à la documentation officielle en version anglaise de JQuery pour plus d'informations sur cette instruction en cliquant ici.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

triggerHandler( type, [data] )

Tester le sélecteur :

.trigger("focus") .triggerHandler("focus")

Le code source de cet exemple est ci après présenté :
$("#myTest04 #old").click(function(){ $("#myTest04 input").trigger("focus"); }); $("#myTest04 #new").click(function(){ $("#myTest04 input").triggerHandler("focus"); }); $("#myTest04 input").focus(function(){ $("<span>A pris le focus !</span>").appendTo("#myFocus04").fadeOut(1000); });

unbind( [type], [data] )

Cette instruction permet de détacher une gestion d'évènements sur un ou un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

unbind( [type], [data] )

Tester le sélecteur :

Ne fait rien... bind/ajouter la gestion 'click' unbind/supprime la gestion 'click'

Un click a été effectué!

Le code source de cet exemple est ci après présenté :
function aClick() { $("#myTest05 div").show().fadeOut("slow"); } function demo05(){ $("#myTest05 #bind").click(function () { // could use .bind('click', aClick) instead but for variety... $("#myTest05 #theone").click(aClick) .text("Vous pouvez cliquez et avoir un feedback!"); }); $("#myTest05 #unbind").click(function () { $("#myTest05 #theone").unbind('click', aClick) .text("Ne fait rien..."); }); }

02 :: Aides à l'interaction , Interaction Helpers:

hover( over, out )

Cette instruction permet de simuler un passage au dessus d'un élément (mouserover et mouseout).
Lorsque le curseur de la souris passe au dessus d'un élément la première fonction est appelée.
Lorsque le curseur de la souris sort de la surface imprimée de l'élément, la seconde fonction est appelée.
De façon supplémentaire, l'instruction vérifie si le curseur de la souris s'est déplacé vers un élément à l'intérieur du premier élément (exemple : une image au sein d'une box "div"). Si cela est le cas le "hover" continuera d'agir et ne déclenchera pas la seconde fonction.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

hover( over, out )

Tester le sélecteur :

• Webjax
• JQuery
• Nicoweb
• Fast-Foods-Restaurants

Le code source de cet exemple est ci après présenté :
$("#myTest07 li").hover( function () { $(this).append($("<span> ***</span>")); }, function () { $(this).find("span:last").remove(); } );

toggle( fn, fn1 )

Cette instruction permet de "toogler" "switcher" entre deux fonctions pour chaque click effectué. Click 1 = fonction , click 2 = fonction 2, click 3 = fonction 1 , click 4 = fonction 2 etc etc
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

toggle( fn, fn1 )

Tester le sélecteur :

• Trouvez votre restaurant sur Fast-Food-Restaurants.com
• Allez y en roller ou en skate
• Mangez des hamburgers
• et dites vous que JQuery ca pète

Le code source de cet exemple est ci après présenté :
$("#myTest08 li").toggle( function () { $(this).css("list-style-type", "disc") .css("color", "#F9BA1C"); }, function () { $(this).css({"list-style-type":"", "color":""}); } );

03 :: Evènements gérés par JQuery , Event Helpers:

blur( ) blur( fn )

Permet d'effectuer un "trigger" de l'événement "blur" pour tous les éléments matchés ou d'ajouter une fonction à un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

blur( ) blur( fn )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest09 input").blur( function () { alert("Webjax ca pète !!!"); } );

change( ) change( fn )

Permet d'effectuer un "trigger" de l'évènement précisé ou bien d'attacher une fonction à un set d'évènements sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

change( ) change( fn )

Tester le sélecteur :

Webjax.eu JQuery Alaradio.fr Nicoweb.fr Fast-Foods-Restaurants.com yepi yep

Le code source de cet exemple est ci après présenté :
function demo11(){ $("#myTest11 select").change(function () { var str = ""; $("#myTest11 select option:selected").each(function () { str += $(this).text() + " "; }); $("#myTest11 div").text(str); }) .change(); // cet appel "change()" permet "trigger" la valeur pour le 1er chargement }

click( ) click( fn )

Permet d'effectuer un "trigger" de l'évènement "click" ou bien de d'assigner une fonction en évènement "click" à un set d'éléments DOM sélectionnés.
Si vous souhaitez attacher des fonctions aux évènements "click" vous devez savoir que la séquence utiliser pour déterminer un click est la suivante :

• mousedown
• mouseup
• click

Vous pouvez tester l'exemple en utilisant le formulaire ci après :

click( ) click( fn )

Tester le sélecteur :

Webjax ca pète

JQuery aussi

plein d'autres sites aussi

Le code source de cet exemple est ci après présenté :
$("#myTest12 p").click(function () { $(this).slideUp(); }); $("#myTest12 p").hover(function () { $(this).addClass("hilite"); }, function () { $(this).removeClass("hilite"); });

dblclick( ) dblclick( fn )

Instruction qui permet d'effectuer un "trigger" de l'évènement "dblclick" sur un élément ou bien d'attacher, de "binder" un set d'éléments DOM sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

dblclick( ) dblclick( fn )

Tester le sélecteur :

Double Cliquez ce bloc, cette box

Le code source de cet exemple est ci après présenté :
var divdbl = $("#myTest13 div:first"); divdbl.dblclick(function () { divdbl.toggleClass('dbl'); });

error( ) error( fn )

Cette instruction permet d'effectuer un "trigger" de l'évènement "error" sur un élément DOM ou bien d'attacher, de "binder" une fonction à un set d'éléments sélectionnés.
Attention, il est difficile pour l'auteur de Webjax de trouver un exemple qui permet de se rendre compte de cette fonctionnalité. Si vous cliquez sur "tester le sélecteur" vous devrez arriver à produire une erreur Javascript dans l'interface de Webjax pour obtenir le message d'alerte qui doit s'afficher dans ce cas, ce grâce à l'instruction JQuery.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

error( ) error( fn )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$(window).error(function(msg, url, line){ alert("message : "+msg+", url : "+url+" , ligne : "+line); });

focus( ) focus( fn )

Vous pouvez tester l'exemple en utilisant le formulaire ci après :

focus( ) focus( fn )

Tester le sélecteur :

le "focus" a été donné

le "focus" a été donné

Le code source de cet exemple est ci après présenté :
$("#myTest15 input").focus(function () { $(this).next("span").css('display','inline').fadeOut(1000); });

keydown( ) keydown( fn )

Permet de déclencher, de "trigger" un évènement "keywdown" pour un élément sélectionné ou bien d'attacher, de "binder" une fonction aux évènements "keydown" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

keydown( ) keydown( fn )

Tester le sélecteur :

Le code source de cet exemple est ci après présenté :
$("#myTest16 input").keypress(function (e) { alert(e.which+" a été "keydown"); });

keypress( ) keypress( fn )

Permet de déclencher, de "trigger" un évènement "keypress" pour un élément sélectionné ou bien d'attacher, de "binder" une fonction aux évènements "keypress" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

keypress( ) keypress( fn )

Tester le sélecteur :

Ajoutez du texte pour tester -

Le code source de cet exemple est ci après présenté :
$("#myTest17 input").keypress(function (e) { if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25) || (97 <= e.which && e.which <= 97 + 25)) { var c = String.fromCharCode(e.which); $("#myTest17 p").append($("<span/>")) .children(":last") .append(document.createTextNode(c)); } else if (e.which == 8) { // backspace in IE only be on keydown $("#myTest17 p").children(":last").remove(); } $("#myTest17 div").text(e.which); });

keyup( ) keyup( fn )

Permet de déclencher, de "trigger" un évènement "keyup" pour un élément sélectionné ou bien d'attacher, de "binder" une fonction aux évènements "keyup" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

keyup( ) keyup( fn )

Tester le sélecteur :

Tapez la touche "Esc" pour déclencher l'action de test.

Le code source de cet exemple est ci après présenté :
$(document).keyup(function(event){ if (event.keyCode == 27) { alert('vous avez tapé la touche "Esc"!'); } });

load( fn )

Cette instruction permet de définir du code qui sera exécuté au chargement d'un élément.
Si l'élément est attaché à "window" cet évènement sera déclenché uniquement lorsque toute la fenêtre, toutes les frames, tous les objets, toutes les images auront bien été chargés. Si l'instruction s'applique à des éléments, l'évènement se déclenchera dès que les éléments et leus contenus auront été chargés.
Attention, "load" ne fonctionnera que si vous l'exécutez avant que l'élément n'ai été complétement chargé, si vous l'exécutez après, l'instruction n'aura aucun effet.
Cela n'arrive pas lorsque vous utilisez "$(document).ready()" que JQuery utilise pour ce type de fonctionnement même si vous l'exécutez après la création de l'élément.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

load( fn )

Tester le sélecteur :

Cet exemple n'est pas réellement testable. Reprenez le code source en local et créer un fichier html à partir de ce code et prenant garde de placer le code Javascript avant le body.

Le code source de cet exemple est ci après présenté :
$(window).load(function () { alert("chargement en cours qui s'affichera pas"); });

mousedown( fn )

Vous pouvez tester l'exemple en utilisant le formulaire ci après :

mousedown( fn )

Tester le sélecteur :

Pré-cliquez et cliquez définitivement pour tester cet exemple.

Le code source de cet exemple est ci après présenté :
$("#myTest20 p").mouseup(function(){ $(this).append('<span style="color:#F9BA1C;">Mouse up.</span>'); }).mousedown(function(){ $(this).append('<span style="color:#B1FF64;">Mouse down.</span>'); });

mousemove( fn )

Insruction qui permet d'attacher une fonction à un événement "mousemove" d'un set d'éléments sélectionnés.
"mousemove" est déclenché" lorsque le curseur est déplacé au dessus d'un élément. Le gestionnaire d'évènements transmet une variable, l'objet "event".
/"clientX" et "clientY" représente les coordonnées de placement du pointeur.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

mousemove( fn )

Tester le sélecteur :

Déplacer votre curseur de souris au dessus de la box orange.

Le code source de cet exemple est ci après présenté :
$("#myTest21 div").mousemove(function(e){ var pageCoords = "( " + e.pageX + ", " + e.pageY + " )"; var clientCoords = "( " + e.clientX + ", " + e.clientY + " )"; $("#myTest21 span:first").text("( e.pageX, e.pageY ) - " + pageCoords); $("#myTest21 span:last").text("( e.clientX, e.clientY ) - " + clientCoords); });

mouseout( fn )

Insruction qui permet d'attacher une fonction à un événement "mouseout" d'un set d'éléments sélectionnés.
"mouseout" est déclenché lorsque le pointeur de la souris sort d'un élément.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

mouseout( fn )

Tester le sélecteur :

déplacez votre souris

déplacez votre souris

0

0

déplacez votre souris

déplacez votre souris

0

0

Le code source de cet exemple est ci après présenté :
var i = 0; $("#myTest22 div.overout").mouseout(function(){ $("p:first",this).text("entrée de la souris"); $("p:last",this).text(++i); }).mouseover(function(){ $("p:first",this).text("sortie de la souris"); }); var n = 0; $("#myTest22 div.enterleave").bind("mouseenter",function(){ $("p:first",this).text("entrée de la souris"); }).bind("mouseleave",function(){ $("p:first",this).text("sortie de la souris"); $("p:last",this).text(++n); });

mouseup( fn )

Instruction qui permet d'attacher une fonction dans un évènement "mouseup" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

mouseup( fn )

Tester le sélecteur :

Pré-cliquez et cliquer avec votre souris !

Le code source de cet exemple est ci après présenté :
$("#myTest23 p").mouseup(function(){ $(this).append('<span style="color:#F9BA1C;">Mouse up.</span>'); }).mousedown(function(){ $(this).append('<span style="color:#B1FF64;">Mouse down.</span>'); });

resize( fn )

Instruction qui permet d'attacher une fonction dans l'évènement "resize" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

resize( fn )

Tester le sélecteur :

Redimensionnez cette fenêtre pour tester cet exemple.

Le code source de cet exemple est ci après présenté :
$(window).resize(function(){ alert("Arrêtez de redimensionner la fenêtre SVP!!!"); });

scroll( fn )

Permet d'attacher une fonction à un événèment "scroll" pour un set d'éléments sélectionnés.
Cet évènement "scroll" est déclenché lorsqu'un "scroll" est effectué
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

scroll( fn )

Tester le sélecteur :

Essayer de scroller cette box.

Mon super paragraphe - Scroll happened!

Le code source de cet exemple est ci après présenté :
$("#myTest25 p").clone().appendTo(document.body); $("#myTest25 p").clone().appendTo(document.body); $("#myTest25 p").clone().appendTo(document.body); $("#myTest25").scroll(function () { $("#myTest25 span").css("display", "inline").fadeOut("slow"); });

select( ) select( fn )

Cette instruction permet soit de déclencher un évènement "select" sur un set d'éléments sélectionnés soit d'attacher une fonction aux évènements "select" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

select( ) select( fn )

Tester le sélecteur :

Cliquez à l'intérieur d'un input:text et sélectionner un contenu pour tester cet exemple.

Le code source de cet exemple est ci après présenté :
$("#myTest26").select( function () { $("#myTest26 div").text("un contenu a été sélectionné").show().fadeOut(1000); });

submit( ) submit( fn )

Cette instruction permet soit de déclencher un évènement "submit" sur un set d'éléments sélectionnés, soit d'attacher une fonction aux évènements "select" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

submit( ) submit( fn )

Tester le sélecteur :

Tapez 'webjax' pour valider le formulaire avec succès.

Le code source de cet exemple est ci après présenté :
$("#myTest27 form").submit(function() { if ($("#myTest27 input:first").val() == "webjax") { $("#myTest27 span").text("Webjax et JQuery c'est cool!!!").show(); return true; } $("#myTest27 span").text("vous n'avez rien tapé! contenu invalide, validation refusée").show().fadeOut(1000); return false; });

unload( fn )

Permet d'attacher une fonction à l'évènement "unload" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :

unload( fn )

Tester le sélecteur :

Le code n'est pas réellement testable dans cet exemple. Consultez la documentation officielle pour plus de détails.

Le code source de cet exemple est ci après présenté :
$(window).unload( function () { alert("Bye now!"); } );

: 11/03/2008 22:05:32 | : JQuery, évènements, events, javascript, framework, ajax, library, jquery, j, query, Framework, Javascript, Library, Ajax, asyncronous, web2.0, ria, dom, control, enhan,

Aucun commentaire enregistré