jQuery Tutorial (Part 4) - Auditeurs d'événement

Aujourd'hui, nous allons passer à la vitesse supérieure et montrer vraiment où jQuery brille - événements. Si vous avez suivi les didacticiels précédents, vous devriez maintenant avoir une assez bonne compréhension de la structure de code de jQuery. à tout développeur web moderne et pourquoi c'est génial. Cette semaine, je pense qu'il est temps de nous salir les mains avec du code et d'apprendre comment… Lire la suite (et toutes les horribles accolades qui l'accompagnent), ainsi que comment trouver des éléments du DOM et certaines choses que vous pouvez faire. pour les manipuler Introduction à jQuery (Partie 2): Méthodes et fonctions Introduction à jQuery (Partie 2): Méthodes et fonctions Ceci fait partie d'une introduction continue aux séries de programmation Web jQuery. La première partie couvrait les bases de jQuery sur la manière de l'inclure dans votre projet et les sélecteurs. Dans la deuxième partie, nous poursuivrons avec… Lire la suite. Je vous ai également montré comment accéder à la console de développement dans Chrome. Problèmes de sites Web avec les outils de développement Chrome ou Firebug Problèmes de sites Web avec les outils de développement Chrome ou Firebug Si vous avez suivi mes tutoriels jQuery jusqu'à présent, vous avez peut-être déjà rencontré certains problèmes de code et ne sait pas comment les résoudre. Face à un morceau de code non fonctionnel, il est très… Read More et comment l'utiliser pour déboguer votre code jQuery.

Les événements, entre autres utilisations, vous permettent de réagir aux événements qui se produisent sur la page et aux interactions des utilisateurs: cliquer, faire défiler et autres éléments fantaisistes..

Qu'est-ce qu'un événement quand même??

Pour les débutants en programmation impliquant une interface graphique, les événements font référence à tout type d'interaction entre l'utilisateur et l'application; ou peuvent être générés en interne par un autre processus. Les applications choisissent les événements à “écouter”, et quand cet événement est déclenché, ils peuvent réagir d'une certaine manière.

Par exemple, taper sur l'écran de votre iPhone générera un seul “événement tap” avec une coordonnée x, y de l'endroit précis où vous avez tapé. Si vous avez tapé sur un objet particulier, tel qu'un bouton, il est probable que le bouton écoutait cet événement et effectuera une action en conséquence. S'il ne s'agissait que d'une partie vide de l'interface, rien n'était attaché à l'événement et rien ne se passera.

En faisant glisser votre doigt sur l'écran, vous créez un autre événement, qui inclut des informations sur les points de début et de fin du mouvement de traînée et peut-être sur la vitesse. Les événements nous fournissent un moyen facile de réagir aux événements.

Facile: en cliquant

L'événement le plus facile à écouter est peut-être l'événement click, déclenché chaque fois qu'un utilisateur clique sur un élément. Cela ne doit pas être un spécifique “bouton” - vous pouvez attacher un écouteur d'événement à n'importe quoi à l'écran, mais en tant que développeur web, vous devez évidemment rendre cela intuitif. Créer un pseudo-bouton en dehors de la lettre une caché dans un paragraphe de texte est possible, mais un peu stupide.

Les méthodes pour attacher un écouteur d'événement ont considérablement changé au fil des années au fur et à mesure du développement de jQuery, mais il s'agit de la méthode actuellement acceptée, qui utilise on ():

$ (sélecteur) .on (événement, action);

Ecouter un “Cliquez sur” événement sur des éléments avec la classe .clickme, puis connectez-vous un message à la console contenant le texte de l'élément cliqué, vous feriez:

$ (". clickme"). on ("click", function () console.log ($ (this) .text ()););

Vous devriez pouvoir voir que l’action que nous avons intégrée ici est une fonction anonyme qui utilise le ce sélecteur (qui fait référence à l’objet actuellement utilisé par jQuery) - dans ce cas, l’objet sur lequel vous avez cliqué. Nous extrayons ensuite le texte de cet objet cliqué et le consignons à la console. Facile, droit?

Arrêtez l'action par défaut:

À un moment donné, vous souhaiterez attacher à quelque chose comme un bouton de soumission de lien ou de formulaire qui fait généralement autre chose. Dans ce cas, il est fort probable que vous ne souhaitiez pas que cette action originale soit exécutée. Vous souhaitez plutôt faire de la magie extravagante ou une magie spéciale de jQuery..

Pour empêcher cette action par défaut de se produire, nous avons une méthode pratique appelée preventDefault. Évidemment. Voyons comment cela fonctionnerait avec un bouton de soumission pour un formulaire

$ ("#MyForm"). on ("submit", function (event) console.log (event); event.preventDefault (); return false;);

Quelques changements ici - premièrement, nous attachons à la soumettre événement au lieu de cliquer. C’est plus approprié lorsqu’il s’agit d’un formulaire, l’utilisateur pouvant tab-space, frappé entrer, ou frapper un soumettre bouton - qui déclencherait l'action par défaut du formulaire. Nous passons également la variable d'événement dans la fonction anonyme, afin que nous puissions faire référence à la données d'événement. Nous avons ensuite utilisé le event.preventDefault () en combinaison avec retourne faux pour arrêter toutes les actions habituelles de terminer.

Dans ce cas, il ne s'agit que de consigner l'événement sur la console, mais en réalité, vous auriez probablement un gestionnaire AJAX ici, que nous aborderons dans la leçon suivante..

Les événements peuvent également être déclenchés par vous

Dans les deux derniers exemples, nous avons utilisé la méthode on pour écouter un événement, mais vous pouvez également déclencher manuellement un événement en l'appelant en tant que méthode. Il est difficile de voir pourquoi vous pourriez utiliser cela pour forcer un “Cliquez sur”, mais a plus de sens si nous regardons l'événement de discussion.

Focus est généralement utilisé avec des champs de saisie pour envoyer un message lorsque l'utilisateur clique dans la zone pour saisir du texte - un message d'instruction sur le format à utiliser, par exemple. Mais vous pouvez également l'utiliser pour forcer l'utilisateur à entrer dans le champ du nom d'utilisateur une fois la page chargée - afin qu'il puisse immédiatement commencer à saisir ses informations de connexion..

$ (document) .ready (function () $ ('# username'.focus (););

Si vous aviez également associé un écouteur d'événement de focus à ce champ de nom d'utilisateur, il se déclencherait également lorsque vous forceriez le focus. Les événements peuvent donc être à la fois déclenchés et écoutés.

Pour le moment, entraînez-vous en attachant différents événements sur la page - vous trouverez une liste complète de tous les événements disponibles ici. N'oubliez pas d'utiliser preventDefault s'il s'agit d'un lien ou d'un bouton, et de voir le résultat de la console concernant les données d'événement..

Je vais en rester là aujourd'hui alors que nous approchons de la fin de cette mini-série de didacticiels jQuery. À la fin, vous devriez être assez confiant pour jeter un peu de jQuery sur votre page et lui faire faire quelque chose. La semaine prochaine, nous examinerons AJAX - une partie importante du Web moderne qui vous permet de charger et d'envoyer des demandes en arrière-plan sans interrompre l'utilisateur..

Comme toujours, les commentaires, questions, commentaires et problèmes sont les bienvenus ci-dessous.

Crédit d'image: écran tactile via Shutterstock

En savoir plus sur: JavaScript, jQuery, Programmation, Développement Web.