Share
Il est important de garder à l’esprit que vous pouvez déclarer autant de droits personnalisés prêt() événements comme vous voudriez. Vous n'êtes pas limité à attacher un seul .prêt() événement au document. le prêt() les événements sont exécutés dans l'ordre dans lequel ils sont inclus.
Remarques: Passer la fonction jQuery, une fonction - par exemple. jQuery (funciton () // code here) - est un raccourci pour jQuery (document) .ready ().
En utilisant le lier() méthode - par exemple. jQuery ('a'). bind ('click', function () ) - vous pouvez ajouter n'importe lequel des gestionnaires standard suivants aux éléments DOM appropriés.
Accentsconagua
brouillerconcentrerchargeredimensionnerfaire défilerdéchargeravant le déchargementCliquez surdblclicksouris vers le basmouseupdéplacer la sourispasser la sourissortie de sourischangementsélectionnersoumettretouche Basappuyez sur la touchekeyupErreurÉvidemment, selon les normes DOM, seuls certains gestionnaires coïncident avec des éléments particuliers.
En plus de cette liste de gestionnaires standard, vous pouvez également utiliser lier() attacher des gestionnaires personnalisés jQuery - par exemple. mouseenter et laisser la souris - ainsi que tous les gestionnaires personnalisés que vous pouvez créer.
Pour supprimer les gestionnaires standard ou personnalisés, nous passons simplement le délier() méthode le nom du gestionnaire ou le nom du gestionnaire personnalisé qui doit être supprimé - par exemple. jQuery ('a'). unbind ('click'). Si aucun paramètre n'est passé à délier(), il supprimera tous les gestionnaires attachés à un élément.
Ces concepts qui viennent d'être discutés sont exprimés dans l'exemple de code ci-dessous..
Remarques: jQuery fournit plusieurs raccourcis vers la lier() méthode à utiliser avec tous les événements DOM standard, ce qui exclut les événements jQuery personnalisés tels que mouseenter et laisser la souris. L'utilisation de ces raccourcis implique simplement de substituer le nom de l'événement au nom de la méthode - par exemple. .Cliquez sur(), mouseout (), concentrer().
Vous pouvez attacher un nombre illimité de gestionnaires à un seul élément DOM à l'aide de jQuery..
jQuery fournit le un() méthode de gestion des événements pour lier de manière commode un événement aux éléments DOM qui seront exécutés une fois, puis supprimés. le un() méthode est juste un wrapper pour lier() et délier().
La syntaxe de raccourci - par exemple. .Cliquez sur(), mouseout (), et concentrer() - pour lier un gestionnaire d’événements à un élément DOM peut également être utilisé pour appeler des gestionnaires par programmation. Pour ce faire, utilisez simplement la méthode d’événement de raccourci sans lui transmettre de fonction. En théorie, cela signifie que nous pouvons lier un gestionnaire à un élément DOM, puis appeler immédiatement ce gestionnaire. Ci-dessous, je le démontre via le Cliquez sur() un événement.
Dis salut Dis salut
Remarques: Il est également possible d'utiliser l'événement déclencheur() méthode pour invoquer des gestionnaires spécifiques - par exemple. jQuery ('a'). click (function () alert ('hi')). trigger ('clic'). Cela fonctionnera également avec les événements namespaced et custom.
jQuery normalise l'objet événement conformément aux normes W3C. Cela signifie que lorsque l'objet d'événement est passé à un gestionnaire de fonctions, vous n'avez pas à vous soucier de la mise en œuvre spécifique à votre navigateur de l'objet d'événement (par exemple, Internet Explorer). window.event). Vous pouvez utiliser les attributs et les méthodes suivants de l'objet événement sans soucis, car jQuery normalise l'objet événement..
type d'événementevent.targetevent.dataevent.relatedTargetevent.currentTargetevent.pageXevent.pageYevent.resultevent.timeStampevent.preventDefault ()event.isDefaultPrevented ()event.stopPropagation ()event.isPropagationStopped ()event.stopImmediatePropagation ()event.isImmediatePropagationStopped ()Pour accéder à l'objet d'événement jQuery normalisé, transmettez simplement la fonction anonyme, transmise à une méthode d'événement jQuery, un paramètre nommé "événement" (ou appelez-le comme vous voulez). Ensuite, dans la fonction de rappel anonyme, utilisez le paramètre pour accéder à l'objet événement. Ci-dessous un exemple codé de ce concept.
Souvent, nous avons un objet dans le DOM qui doit avoir plusieurs fonctions liées à un seul gestionnaire d’événements. Par exemple, prenons le gestionnaire de redimensionnement. En utilisant jQuery, nous pouvons ajouter autant de fonctions à la window.resize gestionnaire comme nous aimons. Mais que se passe-t-il lorsqu'il ne faut supprimer qu'une seule de ces fonctions, mais pas toutes? Si on utilise $ (fenêtre) .unbind ('redimensionner'), toutes les fonctions attachées à la window.resize gestionnaire sera supprimé. En nommant un gestionnaire (par exemple. resize.unique), nous pouvons attribuer un crochet unique à une fonction spécifique pour la suppression.
Dans le code ci-dessus, nous ajoutons deux fonctions au gestionnaire de redimensionnement. Le deuxième événement de redimensionnement (ordre du document) ajouté utilise l'espacement de noms d'événement, puis le supprime immédiatement à l'aide de délier(). Je l'ai fait pour faire remarquer que la première fonction attachée n'est pas supprimée. Les événements d'espacement de noms nous permettent d'étiqueter et de supprimer des fonctions uniques attribuées au même gestionnaire sur un seul élément DOM.
En plus de dissocier une fonction spécifique associée à un seul élément et à un gestionnaire DOM, nous pouvons également utiliser l'espacement de nom d'événement pour invoquer exclusivement (à l'aide de déclencheur()) un gestionnaire spécifique et une fonction attachée à un élément DOM. Dans le code ci-dessous, deux événements de clic sont ajoutés à , puis en utilisant namespacing, un seul est invoqué.
Cliquez sur
Remarques: Il n'y a pas de limite à la profondeur ou au nombre d'espaces de noms utilisés - par exemple. resize.layout.headerFooterContent.
L’espacement de noms est un excellent moyen de protéger, d’appeler et de supprimer tous les gestionnaires exclusifs qu’un plug-in peut exiger..
L'espace de nommage fonctionne avec les événements personnalisés ainsi que les événements standard - par exemple. click.unique ou myclick.unique.
La délégation d'événements repose sur la propagation d'événements (a.k.a. bubbling). Lorsque vous cliquez sur un à l'intérieur d'un , qui est à l'intérieur d'un au au
Cela signifie que si nous attachons un événement de clic à un qui est encapsulé à l'intérieur du event.target) pour identifier l’élément du DOM qui a réellement provoqué le déclenchement de l’événement bouillonnant. Encore une fois, cela nous donnera une référence à l'élément qui a commencé le bouillonnement.
En faisant cela, nous pouvons apparemment ajouter un gestionnaire d’événements à un grand nombre d’éléments DOM en utilisant un seul gestionnaire / déclaration d’événement. C'est extrêmement utile. Par exemple, une table de 500 lignes où chaque ligne nécessite un événement click peut tirer parti de la délégation d'événements. Examinez le code ci-dessous pour clarification.
Maintenant, si vous deviez cliquer littéralement sur l'une des puces de la liste et non sur le lien lui-même, devinez quoi? Vous finirez par enlever le event.target est le , pas le . Puisque c'est le cas, le parent() méthode va saisir le quand il est cliqué d'un en passant le parent() méthode une expression d'élément.
$ (event.target) .parent ('li'). remove (); Le point important ici est que vous devez gérer avec soin ce qui est cliqué lorsque la zone cliquable contient plusieurs éléments encapsulés car vous ne savez jamais exactement où l'utilisateur peut cliquer. Pour cette raison, vous devez vous assurer que le clic est survenu à partir de l'élément que vous espériez..
En utilisant le pratique vivre() méthode d’événement, vous pouvez lier les gestionnaires aux éléments DOM actuellement dans une page Web et à ceux qui doivent encore être ajoutés. le vivre() méthode utilise la délégation d’événements pour s’assurer que les éléments DOM nouvellement ajoutés / créés répondront toujours aux gestionnaires d’événements, quelles que soient les manipulations du DOM ou les modifications dynamiques apportées au DOM. En utilisant vivre() est essentiellement un raccourci pour avoir à configurer manuellement la délégation d’événements. Par exemple, en utilisant vivre() nous pourrions créer un bouton qui crée un autre bouton indéfiniment.
Après avoir examiné le code, il devrait être évident que nous utilisons vivre() appliquer la délégation d'événement à un élément parent ( élément dans l'exemple de code) afin que tout élément de bouton ajouté au DOM réponde toujours au gestionnaire de clics.
Pour supprimer l'événement en direct, nous utilisons simplement le mourir() méthode-par exemple. $ ('bouton'). die ().
Le concept à retenir est le vivre() Cette méthode peut être utilisée pour attacher des événements à des éléments DOM supprimés et ajoutés à l'aide de AJAX. De cette manière, vous éviterez de lier les événements aux nouveaux éléments introduits dans le DOM après le chargement initial de la page..
Remarques: vivre() prend en charge les gestionnaires suivants: Cliquez sur, dblclick, souris vers le bas, mouseup, déplacer la souris, passer la souris, sortie de souris, touche Bas, appuyez sur la touche, keyup.
vivre() ne fonctionne que contre un sélecteur.
vivre() par défaut arrêtera la propagation en utilisant retourne faux au sein de la fonction envoyée au vivre() méthode.
Il est possible de passer l'événement lier() méthode plusieurs gestionnaires d'événements. Cela permet d’attacher la même fonction, écrite une fois, à plusieurs gestionnaires. Dans l'exemple de code ci-dessous, nous associons une seule fonction de rappel anonyme aux gestionnaires d'événements de clic, de frappe et de redimensionnement du document..
Lorsqu'un clic est effectué sur un lien ou qu'un formulaire est soumis, le navigateur appelle ses fonctionnalités par défaut associées à ces événements. Par exemple, cliquez sur un lien et le navigateur Web tentera de charger la valeur du href attribut dans la fenêtre actuelle du navigateur. Pour empêcher le navigateur d’exécuter ce type de fonctionnalité, vous pouvez utiliser le preventDefault () méthode de l'objet événement normalisé jQuery.
jQuery
Les événements se propagent (bulle.k.a.) dans le DOM. Lorsqu'un gestionnaire d'événements est déclenché pour un élément donné, le gestionnaire d'événements appelé est également appelé pour tous les éléments ancêtres. Ce comportement par défaut facilite les solutions telles que la délégation d'événements. Pour interdire ce bouillonnement par défaut, vous pouvez utiliser la méthode de l'événement normalisé jQuery. stopPropagation ().
Arrêtez
Dans l'exemple de code ci-dessus, le gestionnaire d'événements attaché à la Renvoyer faux - par exemple. Si vous deviez commenter le Avec jQuery, vous avez la possibilité de créer vos propres événements personnalisés à l'aide du Maintenant, comme ces événements sont personnalisés et inconnus du navigateur, le seul moyen d'appeler des événements personnalisés est de les déclencher par programme à l'aide de l'outil jQuery. Par défaut, le clonage des structures DOM à l'aide de la En attachant un Il est souvent nécessaire d'obtenir les coordonnées X et Y du pointeur de la souris par rapport à un élément autre que la fenêtre ou le document entier. Cela se fait généralement avec les info-bulles, où l'info-bulle est affichée par rapport à l'emplacement survolé par la souris. Cela peut facilement être accompli en soustrayant le décalage de l'élément relatif des coordonnées de souris X et Y de la fenêtre d'affichage..
Annulation du comportement par défaut et de la propagation d'événements via
retourne faux retourne faux - est l'équivalent d'utiliser les deux preventDefault () et stopPropagation (). clique moi retourne faux déclaration dans le code ci-dessus, alerte() serait invoqué parce que par défaut, le navigateur exécutera la valeur du href. De plus, la page accéderait à jQuery.com en raison de la propagation des événements.
Créer des événements personnalisés et les déclencher via trigger ()
lier() méthode. Ceci est fait en fournissant la lier() méthode avec un nom unique pour un événement personnalisé.déclencheur() méthode. Examinez le code ci-dessous pour un exemple d'événement personnalisé appelé à l'aide de déclencheur().
Evénements de clonage ainsi que des éléments DOM
cloner() La méthode ne clone pas en outre les événements liés aux éléments DOM en cours de clonage. Pour cloner les éléments et les événements attachés aux éléments, vous devez passer le cloner() méthode une valeur booléenne de vrai. Ajouter un autre lien
Obtenir les coordonnées X et Y de la souris dans la fenêtre
déplacer la souris événement sur la page entière (document), vous pouvez extraire les coordonnées X et Y du pointeur de la souris lorsqu’il se déplace à l’intérieur de la fenêtre dans la zone de dessin. Ceci est fait en récupérant le pageY et pageX propriétés de l'objet événement normalisé jQuery.
Obtenir les coordonnées X et Y de la souris par rapport à un autre élément
