Explication détaillée de la page de traitement jQuery events_jquery

L'introduction de JavaScript dans le traitement des événements a été mentionnée dans l'opération dom précédente. Étant donné que les différents navigateurs gèrent les événements différemment, cela pose des problèmes inutiles aux développeurs. JQuery résout facilement ce problème.

1. Lier la surveillance des événements

( http://www.jb51.net/article/60096.htm ) a donné une introduction détaillée à la surveillance des événements et a vu la différence entre les navigateurs standard iE et DOM dans le traitement de la surveillance des événements. l'ordre et la méthode d'exécution de plusieurs événements d'écoute sont également différents.

Dans jQuery, lier des événements via bind() équivaut à attachEvent() du navigateur IE et à addEventListener() du DOM standard. Exemple ci-dessous :

Copier le code Le code est le suivant : $(function() { $("img") .bind("click", function() { à travers }) .bind("click", function() { $("#show").append(" Cliquez sur l'événement 2 "); }) .bind("click", function() { à travers }); }); Le code ci-dessus lie trois événements d'écoute de clic à img.

la syntaxe générale de bind() est

bind(eventType,[data],Listener) Parmi eux, eventType est le type d'événement, qui peut être flou/focus/charger/redimensionner/scroll/unload/click/dblclick/onmousedown/mouseup/onmouseover/onmouseover/onmouseout/mouseenter/onmouseleave/change/select/submit/onkeydown /keypress/ keyup/error

data est un paramètre facultatif, utilisé pour transmettre certaines données spéciales destinées à être utilisées par la fonction d'écoute. L'écouteur est une fonction d'écoute d'événements. Dans l'exemple ci-dessus, une fonction anonyme est utilisée . Pour plusieurs types d'événements, si vous souhaitez utiliser la même fonction d'écoute, vous pouvez l'ajouter au eventType en même temps et utiliser des espaces pour séparer les événements.

Copier le code

Le code est le suivant : $(fonction() { $("p").bind("mouseenter mouseleave", function() { $(this).toggleClass("over") }) });

Certains autres types d'événements spéciaux peuvent utiliser directement le nom de l'événement comme fonction de liaison et accepter des paramètres comme fonctions d'écoute. Par exemple, qui a été utilisé à plusieurs reprises auparavant

Copier le code

Le code est le suivant : $("p").click(function(){ //Ajouter une fonction d'écoute d'événement de clic }) Parmi eux, la syntaxe courante est

eventTypeName(fn) Les noms de types d'événements disponibles incluent

flou/focus/load/resize/scroll/unload/click/dblclick/onmousedown/onmouseup/mousemove/mouseover/mouseout/change/select/submit/ keydown/keypress/keyup/error, etc.

En plus de bind(), jQuery fournit également une méthode one() très pratique pour lier des événements. Cette méthode sera automatiquement supprimée après avoir été liée une fois et ne prendra plus effet.

Copier le code Le code est le suivant : //Créez d'abord 10 blocs pour (var je = 0; je $(document.body).append($(" Cliquez Moi! ")); var iCompteur = 1; //Ajouter un événement de clic avec un pour chacun $("div").one("click", function() { $(this).css({ arrière-plan : "#8f0000", couleur : "#FFFFFF" }).html("Clic ! " (iCounter)); });

Par exemple, dans l'exemple ci-dessus, créez 10 divs et liez un événement de fonction à chaque div. Lorsque vous cliquez sur le bloc div, la fonction sera exécutée une fois puis ne sera plus exécutée.

2. Supprimer l'écouteur d'événement

jQuery utilise unbind() pour supprimer des événements. Cette méthode peut accepter deux fonctions facultatives, ou elle ne peut définir aucun paramètre. Par exemple, le code suivant signifie supprimer tous les événements des balises div et tous les événements de clic des balises P.

Copier le code Le code est le suivant : $("p").unbind("clic"); $("div").unbind();

Si vous souhaitez supprimer un événement spécifié, vous devez utiliser le deuxième paramètre de la méthode unbind(eventType, listening), par exemple :

Copier le code Le code est le suivant : var myFunc = function() { //Corps de la fonction d'écoute }; $("p").bind("click",myFunc); $("p").unbind("click",myFunc);

Par exemple, le code suivant

Copier le code Le code est le suivant : $(function() { var fnMyFunc1 ; //Variable de fonction $("img") .bind("click", fnMyFunc1 = function() { //Attribuer à la variable de fonction à travers }) .bind("click", function() { $("#show").append(" Cliquez sur l'événement 2 "); }) .bind("click", function() { à travers }); $("input[type=button]").click(function() { $("img").unbind("click", fnMyFunc1 //Supprimer l'événement d'écoute myFunc1 ); }); });

Par exemple, dans le code ci-dessus, la fonction fnMyFunc1 bind() est ajoutée et la fonction anonyme lui est attribuée lors de la liaison, servant ainsi de nom d'appel de la fonction unbind(). 3. Passez l'objet événement.

http://www.jb51.net/article/60096.htm Présente le concept d'objets et analyse les attributs et méthodes couramment utilisés des objets événementiels. Vous pouvez voir que les objets événementiels sont utilisés. dans différents navigateurs Il existe de nombreuses différences entre les timers. Dans jQuery, aucun objet time n'est transmis à la fonction d'écoute d'événements de la seule manière.

Copier le code

Le code est le suivant : $(function() { $("p").bind("click", function(e) { // Passer l'objet événement e var sPosPage = "(" e.pageX "," e.pageY ")"; var sPosScreen = "(" e.screenX "," e.screenY ")"; $("span").html(" Page : " sPosPage " Écran : " sPosScreen); }); }); Cliquez ici

Le code ci-dessus lie la fonction d'écoute d'événement de clic de souris à p et passe l'objet d'événement en tant que paramètre pour obtenir la valeur de coordonnée du point de déclenchement de l'événement de souris.

Pour les attributs et méthodes d'événements, la tâche la plus importante de jQuery est de résoudre les problèmes de compatibilité pour les développeurs. Attributs et méthodes couramment utilisés

Description de la propriété altKey Si la touche alt est enfoncée, c'est vrai, sinon c'est faux ctrlKey Si la touche ctrl est enfoncée, c'est vrai, sinon c'est faux shiftKey Si la touche Maj est enfoncée, c'est vrai, sinon c'est faux keyCode Pour les événements keyup et keydown, renvoie la valeur de la clé (c'est-à-dire que les valeurs de a et A sont les mêmes, les deux valent 65) pageX, pageY La position de la souris sur le client, hors barres d'outils, barres de défilement, etc. relierTarget Les événements de souris se produisent lorsque le pointeur de la souris entre ou quitte un élément.

screenX, screenY La position de la souris sur tout l'écran. target L'élément/objet qui a provoqué l'événement tapez le nom de l'événement, tel que clic, survol de la souris, etc. quel événement clavier représente la valeur Unicode du bouton, et le bouton de la souris représente le bouton de la souris (1 bouton gauche, 2 boutons du milieu, 3 boutons droits) stopPropagation() empêche les événements de remonter. PreventDefault() empêche le comportement par défaut de l'événement

Ce qui précède représente l’intégralité du contenu de cet article. Il est expliqué en détail. J’espère que vous l’aimerez tous.