Bon retour.
Dans cette vidéo, je voudrais parler un peu plus de certains types d'événements jusqu'à présent, nous avons rencontré l'événement de clic et l'événement de changement que nous avons utilisé sur une saisie de texte ou une entrée de numéro dans l'application de gestionnaire de score.
Je vais commencer par l'introduction de la référence de l'événement M.B.A.
C'est la page web sur laquelle je suis ici.
Et cette page Web est une référence à tous les différents événements qui sont reconnus par l'API DOM.
Et si nous défilons vers le bas, vous pourriez être surpris de combien il ya.
Et je vais effectivement vous avoir dans l'exercice suivant écrire un code juste pour compter combien il ya est un amusant exemple pratique d'utiliser la géométrie des ..
Donc, vous allez compter combien il y en a, mais pour l'instant il suffit de savoir qu'il ya une tonne d'entre eux et il ya probablement cinq ou six peut-être jusqu'à 10 très commun qui utilisent tout le temps choses comme pour glisser-déposer pour Un évènement de survol cliquez sur les événements peut-être double clics événements clés de presse, mais sinon beaucoup de ceux plus obscurs n'utiliseront jamais ou peut-être vous les utiliserez une fois dans un projet.
Mais il est bon de savoir que cette page Web existe qu'il y a tant d'événements que nous n'utiliserons peut-être jamais.
Et cette vidéo, je vais me concentrer sur deux événements en particulier qui a à voir avec planer donc planant sur un élément avec votre souris.
Et ceux-ci sont appelés la souris sur et souris dehors.
Donc, j'ai une application simple et je vais faire appel à faire que l'âge de lui dans mon nouveau fichier et je vais simplement ajouter mon régulière plaquette et ce ne va pas être une liste complète des tâches.
Nous ne serons pas en mesure d'ajouter de nouvelles ou que nous allons faire est d'avoir une UL avec trois ou quatre alliés.
Des choses comme le chat de chat de lavage nourrissent et nous ferons le chat d'alimentation au chien et sauver.
Donc, nous avons nos trois à faire et c'est tout ce dont nous avons besoin pour l'instant.
Et ce que je veux faire.
Je vais ouvrir ceci dans le navigateur.
Je veux être en mesure de cliquer et qui devrait gris sur l'élément à faire et peut-être barré, il a mis une ligne à travers elle.
Mais je veux aussi être en mesure de vol stationnaire et je veux savoir à qui je suis survoler.
Donc, je reçois cette rétroaction utilisateur agréable que je survoler l'un de ces.
Peut-être que vous l'aurez changer de couleur ou gras commencera par juste le rendre vert et il ya tant d'effets agréables que vous pouvez faire pour votre utilisateur en utilisant ces événements survoler.
Donc, je vais montrer que dès maintenant, avant que nous puissions réellement écrire n'importe quel javascript, même si nous devons faire notre fichier.
Donc, je vais enregistrer un nouveau fichier et je vais l'appeler à faire.
Oui.
Et comme toujours, j'avais mon alerte connecté sauver revenir ici et ajouter dans notre script en bas et notre source est égale à la parodie J.S. Et nous allons enregistrer ou actualiser et nous obtenons notre alerte.
Cela signifie que ça marche.
Allons-y à ce premier événement que j'ai mentionné et la première chose que nous devons faire est de sélectionner quelque chose avant que nous puissions manipuler.
Donc je vais commencer par le faire juste pour le premier mensonge.
Donc, je vais utiliser var premier allié document ECOs et je vais faire un sélecteur de requête allié et rappelez-vous cela me donne le premier mensonge parce que je n'ai pas fait un sélecteur de requête tous et puis je vais ajouter mon écouteur d'événement À la première alliée.
Donc, nous sommes allés en premier ally ajouter l'écouteur d'événement et l'événement que nous sommes à l'écoute pour n'est pas cliquer, c'est la souris sur.
Et puis nous donnons notre fonction de rappel.
Et la façon dont mouseover fonctionne, il va feu dès que nous commençons à planer sur quelque chose.
Donc, si je travaillais avec ce dernier allié ma souris sur elle allait tirer en ce moment et en ce moment et la seconde et en ce moment et ce premier.
Il s'agit donc de savoir quand le vol stationnaire commence.
Donc, d'abord, j'ajouterais l'écouteur d'événement mouseover et nous allons juste faire un journal au lieu d'une souris de rappel sur et si nous rafraîchissons ouvrir notre console se souvenir que nous l'avons fait seulement pour le premier allié et là nous allons nous obtenons un mouseover.
Aussi, il est important de noter que ce n'est pas continuellement tir chaque fois.
Vous savez que nous sommes sur ce que c'est quand notre planer sur un élément commence réellement.
Donc, c'est utile pour que nous ne sommes pas constamment vous savez constamment l'enregistrement ou quel que soit le code que nous avons dans le rappel.
Cela ne se produit que lorsque nous souris au début.
Donc, plutôt que d'annuler simplement que l'exploitation forestière travaillons sur le changement de la couleur de l'allié.
Faisons-le vert.
Donc, quand vous planifiez, il devient vert.
Donc nous avons besoin de faire le premier style de point d'allié que la couleur est égale au vert et nous économisons rafraîchir et maintenant regarder je vais le rendre un peu plus grand et faire un peu plus grand ici et rafraîchir que je commence ma souris sur elle devient verte.
Et puis quand je m'en vais, il reste vert ce qui n'est pas ce que nous voulons.
Nous voulons simplement que ce soit un effet de vol stationnaire.
Donc quand je flotte au-dessus de l'allié, il devient vert.
Mais quand je l'arrête, il devient noir pour faire que nous avons réellement besoin d'un autre événement et que l'événement sera le feu lorsque notre survol est terminée.
Donc, quand on laisse cet élément et il est appelé la souris, donc nous allons faire la même chose première alliée.
Mais à l'événement Lessner souris.
Et puis notre fonction de rappel et nous allons juste faire une première couleur d'attaque de style mouche et le remettre en noir.
Juste comme ça et si nous rafraîchissons vous pouvez voir qu'il va vert et puis la souris sort retourne au noir et la souris sur un vert et ainsi de suite.
Donc, maintenant, nous obtenons ce petit effet de vol stationnaire qui nous montre ce que nous sommes planer sur fondamentalement qui à faire est sélectionné.
Alors maintenant, allons-y pour que tout se passe.
Ce sont quelques petits changements que nous devons faire.
Et le premier d'entre eux est que nous devons sélectionner tous les alliés.
Allez changer très variable pour être loin se trouve documenté requêtes lettre tous les alliés afin que nous donne une liste avec les trois alliés.
Et puis bien sûr, malheureusement, nous ne pouvons pas simplement faire ce mensonge que l'auditeur d'un événement qui ne fonctionne pas.
Nous avons besoin de faire une boucle for de quatre de nos égaux zéro.
Moi, c'est moins que ce lien.
Plus plus.
Et nous espérons que vous commencez à vous sentir un peu plus à l'aise en ajoutant des événements ou en manipulant quelque chose au lieu d'une boucle où nous sélectionnons un groupe d'entre eux, puis nous faisons une boucle et nous faisons quelque chose individuellement.
Comme je l'ai dit il ya quelques vidéos vraiment très fréquent modèle vraiment important que nous commençons à être à l'aise avec elle.
Donc, à l'intérieur d'ici plutôt que de faire d'abord d'autre, j'ajouterais l'écouteur d'événement.
Nous travaillons avec les yeux des alliés, c'est donc notre allié individuel.
Et puis je vais juste copier ce code et il ya un problème avec ce code.
Je veux dire qu'il fonctionnera, mais il ne fonctionnera pas de la façon dont nous le voulons.
Ce qui se passera est que nous ajoutons un écouteur d'événement à chaque allié allié.
Mais quand nous souris sur n'importe lequel d'entre eux nous ne changeons que le premier style de point d'allié de couleur noire.
Et en fait il ne fonctionnera pas parce que le premier mensonge n'est plus défini.
Nous avons changé le nom.
Mais ce n'est pas ce que nous voulions de toute façon.
Nous voulons qu'il soit l'allié qui a été survolé au cours de la souris sur événement survenu sur.
Donc nous pouvons changer cela au mot ceci.
N'oubliez pas que le mot-clé this au lieu d'un écouteur d'événement fait référence à l'élément ou à l'élément sur lequel l'événement a été déclenché.
Donc, ce style, mais l'écran de couleur égale et puis nous allons juste dupliquer ce code à nouveau.
Mais au lieu de passer la souris sur nous allons faire une souris et au lieu d'aller à Green nous allons revenir en noir et puis nous pouvons nous débarrasser de ce et rafraîchir et nous y allons.
Nous avons notre petit effet flotteur agréable.
Donc, la dernière chose qu'ils vont parler est d'ajouter un écouteur de clic juste pour rendre cela un peu plus complet.
Donc, même chose que je pensais avait l'écouteur d'événement cliquez ajouter ou une fonction de rappel.
Et ce que nous allons faire ici, c'est d'utiliser une classe.
Donc, je vais juste ajouter la classe d'abord.
Il n'existe pas, mais je vais dire que cela fait la liste des classes et va faire basculer la liste de début de la classe qui bascule.
Et nous allons simplement appeler la classe fait.
Donc, le point est que je peux cliquer sur un de ces et il devrait gris et avoir un effet de barré.
Et même si je n'ai pas une classe fait défini, il est encore ajouté afin que je puisse vous montrer que ouvrir la console et nous allons inspecter l'un de ces.
Et puis nous allons en fait cliquer dessus et vous pouvez voir ou cliquer sur le premier que vous pouvez voir par la façon dont la couleur verte et noire changeant ici comme un vol stationnaire.
Mais comme je clique sur ce premier vous pouvez le voir ajoute la classe fait.
Et puis je clique de nouveau et il disparaît.
Alors maintenant, il suffit de définir la classe.
Alors, faisons-le maintenant.
Je vais passer à sublime et faire un nouveau fichier et je vais enregistrer ce que faire est que C Ss et la première chose que nous faisons est de définir notre classe fait.
Et je vais lui donner un effet barré que nous faisons avec la décoration de texte et nous avons mis cette ligne à travers et aussi modifier l'opacité de sorte opacité sera 0,5 et enregistrer.
Et puis bien sûr, vous avez besoin de lier ce à faire commencer à évaluer ou vieilli lui fichier avec eux comme étiquette à Due gutsiest nous et nous pouvons économiser.
Maintenant, testons-le.
Vous actualisez la page.
Je flotte.
Donc obtenir sont deux événements de changer la couleur noir et vert.
Et maintenant je peux cliquer et nous obtenons un effet de barré.
Et cette ligne aussi.
Il ya quelques petits changements que je ferais Cependant, si nous revenons à notre fichier javascript le premier est plutôt que de changer la couleur manuellement ici.
Le changer pour être vert et noir.
Je pense qu'il est encore mieux de le faire avec notre propre classe.
Donc, je vais faire une nouvelle classe et je vais appeler celui-ci sélectionné et puis je vais dire quand il est sélectionné texte ou la couleur doit être vert juste comme ça.
Et puis nous allons avec le Javascript.
Et quand nous souris sur tout ce que nous voulons faire est de dire cette liste de classe ajouter sélectionné.
Et cela revient à cette idée de séparation des préoccupations où nous ne voulons pas que notre javascript manipule des styles individuels plutôt que nous pouvons utiliser javascript pour activer des parties de notre C Ss et le SAS sera effectivement en charge du style.
Donc, cela va lui donner la classe choisie lorsque nous survolons et quand nous quittons ou quand nous gâcher nous ferons cette liste de classe muette supprimer sélectionné et si nous économisons rafraîchir, vous pouvez le voir, il semble très bon.
Nous cliquons sur nous pour obtenir notre barré.
D'accord.
Il y a une petite liste de choses à faire.
C'est donc une façon un peu plus agréable de le faire.
Fonctionnellement il ressemble le même.
C'est juste une meilleure pratique d'utiliser des classes plutôt que d'ajouter et de peaufiner les styles un à la fois.
Pour résumer ici, nous avons vu deux nouveaux événements mouseover et souris out.