jQuery Tutorial (Part 4) - Auditeurs

Publicité

Aujourd'hui, nous allons donner un coup de fouet et montrer vraiment où brille jQuery - événements . Si vous avez suivi les didacticiels précédents, vous devriez maintenant avoir une bonne compréhension de la structure de base de jQuery Tutorial jQuery - Prise en main: Bases et sélecteurs Tutoriel jQuery - Prise en main: Basics & Selectors La semaine dernière, j'ai parlé de l'importance 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 un peu de code et d'apprendre comment ... Lire la suite (et toutes les accolades horribles qui vont avec), ainsi que comment trouver des éléments du DOM et certaines choses peut 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 partie 1 couvrait les bases de jQuery sur la façon de l'inclure dans votre projet, ainsi que les sélecteurs. Dans la partie 2, nous continuerons avec ... Lire la suite. Je vous ai également montré comment accéder à la console développeur dans Chrome. Problèmes de site Web avec les outils de développement Chrome ou Firebug Figure Out Problèmes de site Web avec les outils de développement Chrome ou Firebug Si vous avez suivi mes tutoriels jQuery jusqu'à présent, vous avez déjà rencontré certains problèmes de code et ne savent pas comment les réparer. Face à un morceau de code non fonctionnel, il est très ... Lire la suite et comment vous pourriez l'utiliser pour déboguer votre code jQuery.

Les événements, entre autres, vous permettent de réagir aux événements qui surviennent sur la page et aux interactions de l'utilisateur (en cliquant, en faisant défiler et en faisant toutes ces choses fantaisistes).

Qu'est-ce qu'un événement?

Pour les novices en programmation qui impliquent 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é, ils peuvent réagir d'une manière ou d'une autre.

Par exemple, en tapant sur l'écran de votre iPhone va générer un seul "événement de robinet" avec une coordonnée x, y de l'endroit précis où vous avez tapé. Si vous appuyez sur un objet particulier, comme un bouton, il est probable que le bouton a écouté cet événement et qu'il effectuera une action en conséquence. Si ce n'était qu'une partie vide de l'interface, rien n'était attaché à l'événement et rien ne se passera.

Faites glisser votre doigt sur l'écran pour générer un autre événement, qui inclut des informations sur le point de départ et de fin du mouvement de traînée, et peut-être la vélocité. Les événements nous fournissent un moyen facile de réagir aux événements qui se produisent .

Facile: en cliquant

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

Les méthodes d'attachement d'un écouteur d'événement ont changé de manière significative au fil des années, au fur et à mesure que jQuery s'est développé, mais il s'agit de la méthode actuellement acceptée, en utilisant on ():

$(selector).on(event, action); 

Pour écouter un événement "click" sur tous les éléments avec la classe .clickme, puis enregistrer un message sur la console contenant le texte de l'élément cliqué, vous feriez:

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

Vous devriez être capable de voir que l'action que nous avons intégrée ici est une fonction anonyme qui utilise le sélecteur this (qui fait référence à l'objet que jQuery est en train de traiter) - dans ce cas, la chose sur laquelle on a cliqué. Nous extrayons ensuite le texte de cet objet cliqué et l'enregistrons sur la console. Facile, non?

Arrêtez l'action par défaut:

À un certain point, vous voudrez joindre à quelque chose comme un bouton de soumission de lien ou de formulaire qui fait habituellement quelque chose d'autre. Dans ce cas, il est fort probable que vous ne souhaitiez pas que cette action originale soit exécutée - au lieu de cela, vous voulez faire un AJAX de fantaisie ou une magie jQuery spéciale.

Pour empêcher cette action par défaut, 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 - d'abord, nous attachons à l'événement de soumission au lieu de cliquer. Cela est plus approprié lorsque vous manipulez un formulaire, car l'utilisateur peut tabuler, appuyer sur Entrée ou appuyer sur un bouton de soumission, le tout déclenchera l'action par défaut du formulaire. Nous passons également la variable d'événement dans la fonction anonyme, ainsi nous pouvons nous référer aux données d'événement . Nous avons ensuite utilisé event.preventDefault () en combinaison avec return false pour arrêter toutes les actions habituelles.

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

Focus est généralement utilisé avec des champs de saisie pour déclencher un message lorsque l'utilisateur clique dans la boîte pour entrer du texte - un message d'instruction sur le format à utiliser, par exemple. Mais vous pouvez également l'utiliser pour forcer l'utilisateur dans le champ de nom d'utilisateur lorsque la page a été chargée - afin qu'ils puissent immédiatement commencer à taper leurs informations de connexion.

 $(document).ready(function(){ $('#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 le forceriez. Les événements peuvent donc être à la fois déclenchés et écoutés.

Pour l'instant, pratiquez en vous attachant à divers événements sur la page - vous pouvez trouver une liste complète de tous les événements disponibles ici - souvenez-vous d'utiliser preventDefault si c'est un lien ou un bouton, et voyez ce que vous obtenez de la console.

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

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

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