Tutoriel jquery (partie 4) - écouteurs d`événements

Aujourd`hui, nous allons lancer un cran et vraiment montrer où brille jQuery - événements

. Si vous avez suivi les tutoriels du passé, vous devriez maintenant avoir une assez bonne compréhension de la Structure de code de base de jQuery (Et toutes les accolades horribles qui vont avec), ainsi que la façon dont trouver des éléments du DOM et certaines des choses que vous pouvez faire pour les manipuler. Je vous ai aussi montré comment accéder au console développeur Chrome et comment vous pouvez l`utiliser pour déboguer votre code jQuery.jQuery Tutorial - Mise en route: Principes de base & SelectorsjQuery Tutorial - Mise en route: Principes de base & SelectorsLa semaine dernière, j`ai parlé de l`importance jQuery est à tout développeur web moderne et pourquoi il est génial. Cette semaine, je pense qu`il est temps que nous avons nos mains sales avec un code et appris comment ...Lire la suite

Evénements - entre autres utilisations - vous permettent de réagir aux choses qui se produisent sur les interactions de la page et l`utilisateur - clic, défilement, et tout ce genre de choses de fantaisie.

Qu`est-ce qu`un événement Quoi qu`il en soit?

Pour les nouveaux programmes qui implique une interface graphique d`une sorte, les événements se réfèrent à tout type d`interaction entre l`utilisateur et l`application- ou peuvent être générés en interne par un autre processus. Applications choisir les événements à « écouter », et quand cet événement est déclenché, ils peuvent réagir d`une certaine façon.

Video: Bases de jQuery | Partie 3 - Events (Evénements)

Par exemple, en tapant sur l`écran de votre iPhone va générer un « événement du robinet » avec coordonnées x, y de précision où vous avez tapé. Si vous avez appuyé sur un objet particulier, comme un bouton, il est probable que le bouton a été à l`écoute de cet événement et effectuer une action en conséquence. Si c`était juste une partie vide de l`interface, rien a été attaché à l`événement et ainsi rien ne se passera.

Faire glisser votre doigt sur l`écran générerait un autre événement, celui qui comprend des informations sur le début et la fin du mouvement de traînée, et peut-être la vitesse. Les événements nous offrent un moyen facile de réagir aux choses qui se passent.

Video: Tutoriel Final Audio : comment remplacer les oreillettes des casques PANDORA HOPE - Cobrason

Facile: Un clic

Peut-être l`événement le plus facile à écouter est l`événement de clic, tiré 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 à quoi que ce soit sur l`écran, mais en tant que développeur web, vous devez évidemment faire que intuitive. Création d`un pseudo-bouton de la lettre une caché dans un paragraphe de texte est possible, mais un peu stupide.

Les méthodes pour fixer un écouteur d`événements ont considérablement changé au cours des années que jQuery a mis au point, mais cela est la méthode acceptée en cours, en utilisant le ():

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

Pour écouter un «Cliquez» Événement sur tous les éléments avec la classe .ClickMe, puis connectez-vous un message à la console contenant le texte de l`élément cliqué sur, vous feriez:

$(".clickme").sur("Cliquez",fonction(){console.bûche($(ce).texte())-})-

Vous devriez être en mesure de voir que l`action que nous avons intégré ici est une fonction anonyme qui utilise le ce sélecteur (qui se réfère à tout objet jQuery traite actuellement) - dans ce cas, la chose qui a été cliqué. On extrait ensuite le texte de cet objet cliqué et documentons à la console. Facile, non?

Arrêtez l`action par défaut:

À un certain moment, vous voulez attacher à quelque chose comme un lien ou un formulaire qui le bouton d`envoi fait habituellement autre chose. Dans ce cas, il est probable que vous ne voulez pas que l`action originale à effectuer - au contraire, vous voulez faire un peu de fantaisie AJAX ou de la magie jQuery spéciale.

Pour éviter que l`action par défaut se produise, nous avons une méthode pratique appelé preventDefault. Évidemment. Voyons comment cela pourrait fonctionner en traitant avec un bouton pour soumettre un formulaire

$("#myForm").sur("soumettre",fonction(un événement){console.bûche(un événement)-un événement.preventDefault()-revenir faux-})-

Quelques changements ici - d`une part, nous nous joignons à la soumettre événement au lieu de clic. Ceci est plus approprié face à une forme que la puissance de l`utilisateur tab-espace, frappé Entrer, ou frapper un soumettre bouton - qui déclencherait l`action par défaut du formulaire. Nous passons la variable d`événement dans la fonction anonyme, afin que nous puissions également se référer à la données d`événement. Nous avons ensuite utilisé la event.preventDefault () en combinaison avec return false arrêter toutes les actions habituelles de terminer.

Dans ce cas, il est l`exploitation forestière que l`événement à la console, mais en réalité, vous auriez probablement un gestionnaire AJAX ici que nous allons aborder dans la prochaine leçon.

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

Au cours des deux derniers exemples, nous avons utilisé la méthode sur d`écouter un événement, mais vous pouvez également déclencher manuellement un événement en appelant comme une méthode à la place. Il est difficile de voir pourquoi vous pouvez l`utiliser pour forcer un « clic », mais est plus logique si l`on considère l`événement de mise au point.

Mise au point est généralement utilisé avec des champs d`entrée pour déclencher un message lorsque l`utilisateur clique dans la zone pour entrer du texte - un message d`instruction sur le format à utiliser, par exemple. Mais vous pouvez aussi utiliser pour forcer l`utilisateur dans le champ de nom d`utilisateur lorsque la page est chargée - afin qu`ils puissent immédiatement commencer à taper leurs informations de connexion.

$(document).prêt(fonction(){$(`#Nom d`utilisateur`.concentrer()-})-

Si vous aviez également attaché un événement de mise au point d`écoute à ce champ de nom d`utilisateur, il serait également déclenché lorsque vous vous concentrez forcé. Les événements peuvent donc être à la fois déclenché et écouté pour.

Pour l`instant, la pratique en attachant à divers événements sur la page - vous pouvez trouver une liste complète de tous les événements disponibles ici - pensez à utiliser preventDefault si elle est un lien ou un bouton, et voir ce que la sortie que vous obtenez de la console sur les données d`événement.

Je vous laisse là-bas aujourd`hui que nous approchons de la fin de cette mini-série de tutoriels jQuery. Vous devriez, à la fin de celui-ci, assez confiant pour jeter un peu de jQuery sur votre page et en faire quelque chose. La semaine prochaine, nous allons voir AJAX - une partie importante de la web moderne qui vous permet de charger et d`envoyer des demandes en arrière-plan sans interrompre l`utilisateur.

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