Share
Les pages Web, pour la plupart, sont pilotées par les événements. Des bibliothèques telles que jQuery ont fourni des méthodes d'assistance pour rendre cette fonctionnalité beaucoup plus facile à comprendre. Dans ce didacticiel, nous allons développer ces méthodes pour créer vos propres événements personnalisés à noms de lieux..
Avant le luxe des bibliothèques JavaScript, si vous vouliez ajouter un simple événement click à un élément, vous deviez suivre la procédure suivante pour prendre en charge tous les navigateurs:
Accentsconagua
var elt = document.getElementById ("# myBtn"); if (elt.addEventListener) elt.addEventListener ("clic", fonction () alert ('bouton cliqué');); else if (elt.attachEvent) elt.attachEvent ("onclick", function () alert ('le bouton a été cliqué');); else elt.onclick = function () alert ('bouton cliqué'); ; Maintenant, les bibliothèques JavaScript sont fournies avec des méthodes d'assistance pour rendre la gestion des événements plus digeste. Par exemple, faire ce qui précède dans jQuery est beaucoup plus condensé.
$ ("# myBtn"). click (function () alert ('bouton cliqué');); Quelle que soit votre implémentation, les événements comportent trois parties principales:
Dans notre événement click au début du didacticiel, le programme d'écoute est l'événement click qui attend le clic sur l'élément #myBtn. Lorsque l'utilisateur clique sur l'élément #myBtn, il se déclenche et déclenche le gestionnaire; qui, dans ce cas, est une fonction anonyme pour afficher le message alert ().
jQuery nous permet d'aller plus loin et de créer nos propres événements personnalisés. Dans ce didacticiel, nous utiliserons une liste non ordonnée d'une liste de répertoires et ajouterons des fonctionnalités via des événements personnalisés qui réduiront et développeront des répertoires. Commençons par notre structure de page de base qui sera utilisée dans les exemples à venir.
Événements personnalisés jQuery
Ici, nous créons une simple liste de répertoires en utilisant une liste non ordonnée. Nous avons inclus jQuery à partir du CDN JSAPI Google et appelé addIcons (), qui ajoute des images de chaque fichier et dossier en fonction de l’extension de fichier indiquée. Cette fonction est purement esthétique. Il n'est pas nécessaire que le code d'événement personnalisé que nous sommes sur le point d'implémenter. Le résultat de cette étape et peut être consulté ici.
Avant de commencer à ajouter des événements à notre exemple de liste de répertoires, nous devons comprendre le fonctionnement de .bind () et .trigger (). Nous utilisons bind () pour attacher un événement à tous les éléments correspondants qui résident actuellement sur la page. Ensuite, utilisez .trigger () lorsque vous souhaitez distribuer l'événement. Jetons un coup d'oeil à un exemple rapide.
$ ("# myBtn"). bind ("click", function (evt) alert ('le bouton a été cliqué');); $ ("# myBtn"). trigger ("clic"); Dans le code ci-dessus, un message d'alerte apparaît lorsque vous cliquez sur l'élément avec l'id "myBtn". De plus, notre trigger () déclenchera l'événement click immédiatement lors du chargement de la page. N'oubliez pas que bind () est la méthode par laquelle vous attachez un événement. Pendant que .trigger (), vous forcez la distribution de l'événement et exécutez le gestionnaire de l'événement.
La méthode .bind () ne se limite pas aux événements du navigateur, mais peut être utilisée pour implémenter vos propres événements personnalisés. Commençons par créer des événements personnalisés nommés effondrer et développer pour notre exemple d'annuaire.
Tout d'abord, relions un effondrer événement à tous les annuaires représentés dans notre liste non ordonnée.
$ ("# arbre li: parent"). bind ("collapse", fonction (evt) Ici nous trouvons tous les éléments qui sont des parents et passons le nom de l'événement effondrer dans la méthode .bind (). Nous avons également nommé le premier paramètre evt, qui représente l'objet Event jQuery.
$ (evt.target) .children (). slideUp (). end (). addClass ("collapsed"); Maintenant, nous sélectionnons la cible de l'événement et remontons tous ses enfants. De plus, nous avions une classe CSS s'est effondré à notre élément d'annuaire.
). bind ("expand", function (evt) Nous enchaînons les événements et attachons notre développer événement sur cette ligne.
$ (evt.target) .children (). slideDown (). end (). removeClass ("collapsed"); ); Tout le contraire de notre effondrer gestionnaire d'événements, dans le développer gestionnaire d'événement nous glissons tous les éléments enfants des éléments de l'annuaire et supprimons la classe s'est effondré de notre élément cible. Mettre tous ensemble.
$ ("# arbre li: parent"). bind ("collapse", fonction (evt) $ (evt.target) .children (). slideUp (). end (). addClass ("collapsed");) .bind ("expand", fonction (evt) $ (evt.target) .children (). slideDown (). end (). removeClass ("collapsed");); Ce code seul ne fera rien pour nous parce que les événements effondrer et développer sont inconnus et ne savent pas quand être envoyés. Nous ajoutons donc notre méthode .trigger () lorsque nous voulons que ces événements se déclenchent.
$ ("# arbre li: parent"). bind ("collapse", fonction (evt) $ (evt.target) .children (). slideUp (). end (). addClass ("collapsed");) .bind ("expand", fonction (evt) $ (evt.target) .children (). slideDown (). end (). removeClass ("collapsed");)). toggle (function () // Basculer entre $ (this) .trigger ("collapse");, function () $ (this) .trigger ("expand");); Si nous courons ce code, nos répertoires basculeront maintenant lorsque vous cliquez sur entre le tir de la effondrer et développer un événement. Mais si vous cliquez sur un répertoire imbriqué, vous remarquerez que nos événements se déclenchent plusieurs fois par clic. C'est à cause de l'événement bouillonnant.
Lorsque vous cliquez sur un élément d'une page, l'événement est déplacé ou capturé à partir du parent le plus élevé auquel un événement est associé à la cible prévue. Il bouillonne ensuite à partir de la cible visée, sauvegardant le plus haut parent.
Par exemple, lorsque nous cliquons sur le dossier css /, notre événement est capturé via root /, assets /, puis css /. Il bouillonne ensuite css /, assets /, puis root /. Par conséquent, le gestionnaire est exécuté trois fois. Nous pouvons corriger cela en ajoutant une simple condition dans le gestionnaire pour la cible visée.
if (evt.target == evt.currentTarget) (evt.target) .children (). slideUp (). end (). addClass ("collapsed"); Ce code vérifie chaque cible actuelle de l'événement par rapport à la cible prévue, ou currentTarget. Lorsque nous avons une correspondance, le script n'exécutera l'événement collapse que dans ce cas. Après avoir mis à jour le effondrer et développer cas, notre page fonctionnera comme prévu.
Un espace de noms fournit un contexte pour les événements. Les événements personnalisés, effondrer et développer, sont ambigus. L'ajout d'un espace de nom à un événement personnalisé jQuery est structuré Nom de l'événement suivi du espace de noms. Nous allons créer notre espace de noms appelé TreeEvent, car nos événements représentent les actions et les fonctionnalités d'une arborescence de dossiers. Une fois que nous avons ajouté les espaces de noms à nos événements, le code ressemble maintenant à ceci:
$ ("# arbre li: parent"). bind ("collapse.TreeEvent", fonction (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children (). slideUp () .end (). addClass ("collapsed");). bind ("expand.TreeEvent", fonction (evt) if (evt.target == evt.currentTarget) $ (evt.target) .children ( ) .slideDown (). end (). removeClass ("collapsed");). toggle (function () $ (this) .trigger ("collapse.TreeEvent");, function () $ (this ) .trigger ("expand.TreeEvent");); Tout ce que nous devions changer était les noms d’événement dans les méthodes .bind () et .trigger () effondrer et développer événements. Nous avons maintenant un exemple fonctionnel utilisant des événements de namespaced personnalisés.
Notez que nous pouvons facilement supprimer des événements d’éléments en utilisant la méthode unbind ().
$ ("# tree li: parent"). unbind ("collapse.TreeEvent"); // supprime simplement l'événement collapse $ ("# tree li: parent"). unbind (". TreeEvent"); // supprime tous les événements sous l'espace de noms TreeEvent Un autre moyen de configurer un événement personnalisé dans jQuery consiste à utiliser l'API d'événements spéciaux. Il n’ya pas beaucoup de documentation sur cette API, mais Brandom Aaron, un contributeur principal de jQuery, a écrit deux excellents articles de blog (http://brandonaaron.net/blog/2009/03/26/special-events et http: / /brandonaaron.net/blog/2009/06/4/jquery-edge-new-special-event-hooks) pour nous aider à comprendre les méthodes disponibles. Ci-dessous une brève explication des méthodes.
Voyons maintenant comment nous pouvons combiner nos événements personnalisés dans un événement spécial que nous appellerons toggleCollapse.
jQuery.event.special.toggleCollapse = setup: function (données, espaces de noms) pour (var i dans les espaces de noms) if (espaces de noms [i] == "TreeEvent") jQuery (this) .bind ('clic', jQuery.event.special.toggleCollapse.TreeEvent.handler); , teardown: function (namespaces) for (var i in namespaces) if (namespaces [i] == "TreeEvent") jQuery (this) .unbind ('click', jQuery.event.special.toggleCollapse .TreeEvent.handler); , TreeEvent: gestionnaire: function (événement) if (événement.target == événement.currentTarget) var elt = jQuery (this); var cssClass = "collapsed"; if (elt.hasClass (cssClass)) elt.children (). slideDown (). end (). removeClass (cssClass); else elt.children (). slideUp (). end (). addClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (this, arguments); ; $ ("# arbre li: parent"). bind ("toggleCollapse.TreeEvent", function (evt) ); Jetons un coup d'oeil section par section.
jQuery.event.special.toggleCollapse = setup: function (données, espaces de noms) pour (var i dans les espaces de noms) if (espaces de noms [i] == "TreeEvent") jQuery (this) .bind ('clic', jQuery.event.special.toggleCollapse.TreeEvent.handler); , La première ligne jQuery.event.special.toggleCollapse crée un nouvel événement spécial appelé toggleCollapse. Nous avons ensuite notre méthode de configuration, qui itère sur tous les espaces de noms de cet événement. Une fois qu'il trouve TreeEvent, il lie un événement de clic aux éléments correspondants, qui appellera jQuery.event.special.toggleCollapse.TreeEvent.handler une fois l'événement est déclenché. Notez que nous utilisons un événement de clic par opposition à la fonction toggle () que nous utilisions précédemment. Toggle () n'est pas un événement, mais une fonction d'assistance à l'interaction.
teardown: function (namespaces) for (var i dans les namespaces) if (namespaces [i] == "TreeEvent") jQuery (this) .unbind ('click', jQuery.event.special.toggleCollapse.Collapse.TreeEvent. ) , Notre méthode de démontage est similaire à notre méthode de configuration, mais nous allons plutôt dissocier l'événement click de tous les éléments correspondants..
TreeEvent: handler: function (event) if (event.target == event.currentTarget) var elt = jQuery (this); var cssClass = "collapsed"; if (elt.hasClass (cssClass)) elt.children (). slideDown (). end (). removeClass (cssClass); else elt.children (). slideUp (). end (). addClass (cssClass); event.type = "toggleCollapse"; jQuery.event.handle.apply (this, arguments); ;
Nous utilisons ici l'espace de noms TreeEvent pour résumer le gestionnaire. Dans le gestionnaire, nous basculons entre un état replié et un état développé en fonction du fait que l'élément correspondant contient la classe CSS "repliée". Enfin, nous définissons le type d’événement avec le nom de notre événement., toggleCollapse et utilisez la méthode apply () qui exécutera l'argument de rappel lorsque nous lions cet événement spécial.
$ ("# arbre li: parent"). bind ("toggleCollapse.TreeEvent", function (evt) ); Enfin, nous lions notre événement spécial aux répertoires de notre liste de répertoires. Notre résultat final peut être vu ici.
Vous trouverez ci-dessous quelques ressources supplémentaires qui pourraient vous être utiles lorsque vous utiliserez des événements personnalisés. Merci d'avoir lu!
