Tutoriel jQuery (Partie 4)

Publicité

Aujourd'hui, nous allons donner un coup de pouce 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 des structure de code de base de jQuery Tutoriel jQuery - Prise en main: bases et sélecteursLa semaine dernière, j'ai parlé de l'importance de jQuery pour tout développeur Web moderne et pourquoi il 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 des choses que vous pouvez faire pour les manipuler Introduction à jQuery (Partie 2): Méthodes et fonctionsCela fait partie d'une introduction continue aux débutants de la série de programmation Web jQuery. La partie 1 a couvert les bases de jQuery sur la façon de l'inclure dans votre projet et les sélecteurs. Dans la partie 2, nous allons continuer avec ... Lire la suite

. Je vous ai aussi montré comment accéder au console développeur dans Chrome Résoudre les problèmes de site Web avec les outils de développement Chrome ou FirebugSi vous avez suivi mes tutoriels jQuery jusqu'à présent, vous avez peut-être déjà rencontré des problèmes de code et vous ne savez pas comment les résoudre. Face à un bout de code non fonctionnel, c'est très ... Lire la suite et comment vous pourriez l'utiliser pour déboguer votre code jQuery.

Les événements - entre autres utilisations - vous permettent de réagir aux choses qui se produisent sur la page et aux interactions des utilisateurs - en cliquant, en faisant défiler et tout ce qui est sophistiqué.

Qu'est-ce qu'un événement de toute façon?

Pour les débutants en programmation impliquant une interface graphique quelconque, les événements se réfèrent à tout type d'interaction entre l'utilisateur et l'application; ou peut être généré en interne par un autre processus. Les applications choisissent les événements à «écouter» et, lorsque cet événement est déclenché, elles peuvent réagir d'une manière ou d'une autre.

Par exemple, en tapant sur l'écran de votre iPhone, vous générez un seul «événement de tap» avec une coordonnée x, y de l'endroit précis où vous avez tapé. Si vous avez tapé sur un objet particulier, comme 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 vierge de l'interface, rien n'était attaché à l'événement et donc rien ne se produira.

Faire glisser votre doigt sur l'écran générerait un autre événement, celui qui comprend des informations sur le point de début et de fin du mouvement de glissement, et peut-être la vitesse. Les événements nous fournissent un moyen facile de réagir aux choses qui arrivent.

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. Il ne s'agit pas nécessairement d'un "bouton" spécifique - vous pouvez attacher un écouteur d'événements à n'importe quoi sur l'écran, mais en tant que développeur Web, vous devez évidemment le rendre intuitif. Création d'un pseudo-bouton à partir de la lettre une caché dans un paragraphe de texte est possible, mais quelque peu stupide.

Les méthodes de connexion d'un écouteur d'événements ont considérablement changé au fil des ans au fur et à mesure du développement de jQuery, mais il s'agit de la méthode actuellement acceptée, utilisant sur():

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

Pour écouter un «Cliquez sur”Événement sur tous les éléments avec la classe .clickme, puis enregistrez un message sur la console contenant le texte de l'élément cliqué, vous feriez:

$ (". clickme"). on ("click", fonction () { 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 cette sélecteur (qui fait référence à l'objet que jQuery traite actuellement) - dans ce cas, la chose sur laquelle vous avez cliqué. Nous extrayons ensuite le texte de cet objet cliqué et le connectons à la console. Facile, non?

Arrêter l'action par défaut:

À un moment donné, vous souhaiterez attacher à quelque chose comme un lien ou un bouton d'envoi 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 effectuée - au lieu de cela, vous voulez faire de l'AJAX fantaisie ou de la magie jQuery spéciale.

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 lors de l'utilisation d'un bouton d'envoi pour un formulaire

$ ("# myForm"). on ("submit", fonction (événement) { console.log (événement); event.preventDefault (); retour faux; });

Quelques changements ici - premièrement, nous attachons à la soumettre événement au lieu de cliquer. Ceci est plus approprié lorsque vous traitez un formulaire car l'utilisateur pourrait espace de tabulation, frappé entrerou frappez un soumettre bouton - qui déclencherait l’action par défaut du formulaire. Nous transmettons également la variable d'événement à la fonction anonyme, afin que nous puissions faire référence à la variable données d'événement. Nous avons ensuite utilisé le event.preventDefault () en combinaison avec retour faux pour arrêter toutes les actions habituelles de se terminer.

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

Vous pouvez également déclencher des événements

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 comme méthode à la place. Il est difficile de voir pourquoi vous pouvez utiliser cela pour forcer un "clic", mais cela a plus de sens si nous regardons l'événement focus.

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

$ (document) .ready (fonction () { $ ('# username'.focus (); });

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

Pour l'instant, entraînez-vous en vous attachant à divers événements sur la page - vous pouvez trouver 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 voyez quelle sortie vous obtenez de la console sur les données d'événement.

Je vais le laisser là aujourd'hui alors que nous approchons de la fin de cette mini-série de didacticiels jQuery. Vous devriez, à la fin de celui-ci, être suffisamment confiant pour lancer du 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