D'accord, nous reviendrons.
Retour dans l'introduction à javascript J'ai mentionné que l'une des raisons importantes pour l'apprentissage de JavaScript est que nous pouvons l'utiliser pour rendre nos pages interactives.
C'est comment nous pouvons exécuter le code quand un utilisateur clique sur un bouton ou tapez quelque chose dans ou frappe la touche fléchée ou quoi qu'ils font.
Nous pouvons avoir un code correspondant qui est exécuté à un moment donné et pas seulement exécuté au début de la page.
Donc, pour ce faire, nous devons parler des événements Dom.
Cette vidéo sera donc une introduction aux événements Dom.
Conceptuellement le processus pour les mettre en place et puis aussi la syntaxe.
Donc, comme je l'ai mentionné événements sont partout.
Pensez quand vous interagissez avec la page Web les différentes choses qui se produisent vous pouvez cliquer sur des choses comme un bouton, vous pouvez survoler un lien et quelque chose pourrait apparaître.
Vous pouvez faire glisser et déposer des éléments sur certaines pages.
Vous voudrez peut-être avoir un code qui s'exécute à partir de l'utilisateur double clic ou effectivement cette page Web a quelques exemples.
Cette diapositive dot com est un site Web et je touche les flèches gauche et droite pour changer de diapositives.
Donc, un code est exécuté quand je clique sur la flèche gauche ou la flèche droite ou lorsque je clique ici.
C'est aussi un événement et il est en train de faire quelque chose il est en cours d'exécution un certain code qui change la diapositive actuelle.
Donc, le point est des événements sont partout et ils sont vraiment excitants.
C'est l'un de mes sujets préférés à enseigner parce que maintenant nous pouvons rendre nos pages Web interactives, nous pouvons prendre les trucs de manipulation que nous avons appris sur les changements de couleurs en changeant le texte et puis nous pouvons effectivement le faire quand quelque chose en particulier se produit.
Donc, cela ouvre vraiment le potentiel de manipuler le dortoir.
C'est comment nous allons faire des jeux, c'est comment nous allons faire des validateurs de formulaire, nous allons faire un jeu de sélecteur de couleur vraiment cool et que tout découle de ces événements.
Donc, la façon dont ces événements fonctionnent est que nous les rattachons à des éléments spécifiques de sorte que nous sélectionnons un élément comme le premier bouton ou le second H-1 ou l'entrée où un type est égal au texte et ensuite nous attachons un écouteur d'événement à celui Élément sélectionné.
Par exemple, nous pourrions être à l'écoute d'un clic sur un bouton que nous pourrions écouter pour un événement hover sur un H1, nous pourrions écouter l'événement key press dans une entrée de texte et nous parlerons plus des différences entre ces événements.
Il ya tellement de différents types d'événements en javascript, mais ce qui est important, c'est que nous devons avoir un événement qui est écouté sur un élément donné.
Donc juste comme avant quand je parlerais de sélectionner et puis manipuler qui s'applique toujours.
Nous devons sélectionner quelque chose et alors la manipulation qui se produit est nous ajoutant un écouteur d'événement à cette chose que nous avons sélectionnée.
Il ya une méthode en particulier que nous allons utiliser tout le temps qui est appelé add événement écouteur.
Ainsi, lors de l'écoute d'événement est ce que nous utilisons une fois que nous sélectionnons un élément comme le premier bouton ou le type d'entrée parce que le mot de passe et nous avons quelque chose sélectionné alors nous appelons add événement écouteur sur elle et nous donnons deux arguments.
Le premier est le type d'événement que nous voulons écouter.
Et le deuxième argument est le code que nous voulons lancer lorsque cet événement se produit.
Voici donc un exemple.
Je suis en sélectionnant le premier bouton sur une page n'a pas vraiment d'où le bouton est ou comment il regarde ou n'importe quoi n'importe quel bouton.
Et puis je suis bouton d'appel à l'écouteur d'événement cliquez et puis le deuxième argument est une fonction qui va tout le chemin à ici.
Et ce code n'est pas exécuté tout de suite.
Rappelez-vous ceci est appelé un rappel.
Ce code n'est pas exécuté immédiatement.
Il est seulement exécuté une fois que cet événement se déclenche.
Donc, une fois que vous cliquez sur le bouton javascript va dans il rappelle.
Cette fonction dit hey c'est votre moment de briller et de revenir ici prêt, nous vous exécutons.
Et puis ce code est exécuté et nous obtenons des conseils ne pas enregistrer quelqu'un cliquez sur le bouton.
Ainsi, cette fonction s'exécute chaque fois qu'un bouton est rapide à exécuter avec le bouton spécifique que nous avons sélectionné en cliquant.
Voici un autre exemple.
Ce cas, j'ai la marque ici un bouton et un paragraphe et j'ai sélectionné les deux avec le sélecteur Kery et je les sauvegarder tous les deux à des variables et puis tout ce que nous faisons est d'ajouter un écouteur de clic donc bouton ajoute l'écouteur d'événement cliquez et puis le Second argument est que la fonction de rappel.
Et ce que nous allons faire chaque fois que ce bouton est cliqué est modifié le contenu du texte des paragraphes pour être quelqu'un cliquez sur le bouton et vous pouvez voir quand je clique sur ce bouton, il change de personne n'est cliqué sur moi et à quelqu'un a cliquer sur le bouton.
Alors maintenant, je vais faire une démonstration rapide en utilisant notre page de démonstration Dom, commençons par faire de ce H-1 ici.
Modifier la couleur lorsqu'un utilisateur clique dessus.
Pour ce faire, nous devons toujours commencer par sélectionner le H-1.
Nous avons donc un tas d'options là-bas.
Je vais juste utiliser le document selector queery que le sélecteur de requête H-1 assurez-vous que nous l'avons.
D'accord.
Ensuite, nous écrivons juste H-1 qui ajoutent l'écouteur d'événement.
Rappelez-vous qu'il ya deux arguments.
Le premier est l'événement que nous écoutons.
Et nous allons passer plus de temps à parler des différents événements les différentes options.
Pour l'instant, nous faisons simplement un clic et le second est le code que nous voulons lancer lorsque l'utilisateur clique.
Donc, la fonction et tout simplement commencer très simple et juste faire une alerte lorsque l'utilisateur clique.
Nous allons donc faire une alerte chacun a été cliqué juste comme ceci.
Et maintenant, allons entrer.
Rien ne change tout de suite.
Mais maintenant, si je clique sur l'un donc je fermer ce.
Si je clique n'importe où sur la page.
Mis à part le H-1, rien ne se passe.
Dès que je clique sur le H-1, même si cela me dit que H-1 était correcte.
C'est important.
Il ne s'applique qu'à l'H-1, mais cela signifie que je peux aller ici et cliquer parce que rappelez-vous si je l'inspecter le H-1 va tout le chemin à travers l'écran.
Donc, juste quelque chose à garder à l'esprit que c'est bien pour nous dans ce cas, mais il apparaîtra de temps en temps où les choses se comportent un peu différent que vous pourriez vouloir et vous avez besoin de les utiliser CSSA peut-être pour raccourcir la première étape ou vous changez L'auditeur de toute façon.
Alors, plutôt que d'alerter, essayons de faire autre chose.
Et si je viens de frapper la flèche vers le haut d'un écouteur ajouter l'événement écouteur et je change le code ici et je fais quelque chose comme H-1 que l'arrière-plan de style égaux et nous allons faire fond orange orange et j'ai touché entrer.
Encore une fois rien ne change tout de suite, mais quand je clique sur l'attention à ce qui se passe la première chose qui se passe, c'est qu'il dit toujours dans une alerte que H-1 a été cliqué.
Et puis, quand je ferme, il devient orange.
La morale ici est que nous pouvons avoir plus d'un auditeur sur un élément donné.
Lorsque nous avons cliqué sur ce H-1, le premier auditeur que nous avons ajouté était à l'écoute d'un clic et il a couru une alerte et ensuite nous avons ajouté un autre auditeur après qui a également écouté pour un clic, mais il a changé la couleur de fond.
Donc, quand je clique sur les deux courir.
Et ça va toujours arriver pour maintenant si je clique de nouveau, je reçois l'alerte et son changé en orange bien sûr, vous ne voyez pas que parce que c'était déjà orange, mais vous devez me faire confiance.
Il ne cesse de le changer en orange à plusieurs reprises et plus.
OK I Je vais rafraîchir et se débarrasser de tout cela.
Je veux aussi faire une démonstration rapide en ajoutant un auditeur à l'UL.
Donc, permet de faire un document de vidage de requête sélecteur UL et se rappeler que nous avons trois alliés au lieu d'un seul ul.
Donc, je vais vous montrer ce qui se passe quand nous le mettons sur un élément parent comme ça.
Eh bien et je ne vais pas utiliser une variable va juste faire cela ici.
Auditeur adulé.
Cliquez.
C'est donc le premier argument.
La seconde est la fonction que nous voulons exécuter comme ça.
Et je vais commencer.
Faisons juste une console qui log bien a été clics et vous savez quoi.
C'est la voix passive.
Mauvaise idée.
Faisons.
Vous avez cliqué sur l'UL beaucoup mieux.
D'ACCORD.
Alors gardons la console ouverte et allons cliquer sur l'UL.
Mais comment allons-nous cliquer sur l'huile.
Parce que le puits a trois alliés à l'intérieur de celui-ci.
L'UL est tout ça ici.
Donc, tout rapide n'a pas d'importance que je suis allié sur n'importe où dans le puits.
Vous pouvez voir le nombre incrémenter ici.
Tout rapide sur le puits il va exécuter ce log de point de console.
Donc, nous allons rafraîchir une fois de plus et cette fois disons que je veux changer l'allié lui-même.
Quand je clique sur un allié individuel, je veux que quelque chose se produise.
Il y a quelques façons de le faire.
Et nous allons commencer par le plus simple qui est d'attacher un auditeur à chaque allié comme un heads-up.
Ce que nous allons faire finalement est d'attacher un auditeur à l'UL et puis à l'intérieur de cet auditeur.
Nous allons détecter qui se trouvent spécifiquement à l'intérieur de l'UL a été cliqué sur tous avec un Lessner.
Pour l'instant, même si nous allons ajouter un auditeur séparé à chaque mensonge, nous devons donc commencer par sélectionner les Alliés afin que nos alliés égaux document point queery sélecteur tous les alliés s'assure que nous les avons tous.
Très bien, nous devons faire une boucle for.
Donc pour var I est égal à zéro.
Rappelez-vous que j'ai dit que nous allions faire cela tout le temps.
Donc je moins que les alliés que la longueur je plus plus juste comme ça.
Et puis à l'intérieur d'ici nous allons réellement ajouter un auditeur à chaque allié individuel.
Donc, ça ressemble à ça.
Elyse I de sorte que nous donne l'allié spécifique et l'écouteur d'événement la fonction de clic juste comme cela et fait ceci un peu.
Et puis le code que nous voulons exécuter.
Changeons la couleur de l'allié qui a été cliqué et nous allons simplement le changer pour être violet.
Nous avons donc quelques options différentes.
Ce que je dois faire est de se référer à l'allié sur lequel on a cliqué.
Donc, je pourrais faire cette alliés, je bien que ce n'est pas vraiment une grande solution, car il ya une façon beaucoup plus facile de faire ce qui est d'utiliser ce mot-clé.
Donc, à l'intérieur d'un écouteur, le mot-clé se réfère à l'élément sur lequel on a cliqué ou à l'élément sur lequel on a survolé ou à l'élément sur lequel l'appui de touche a eu lieu, où l'élément qui va juste avant l'événement fait référence à.
Donc je peux écrire ce style de point que la couleur est égale au violet.
Et en fait c'est quelque chose de plus évident.
C'est une petite police.
Alors faisons rose juste comme ça.
Je touche entrer.
Rien ne se passe immédiatement, mais si je clique sur un allié, vous pouvez voir qu'il change pour être rose.
Et si je continue à cliquer de changer en rose Vous ne pouvez pas dire.
Donc, ce modèle ici de sélectionner un tas de choses en boucle par eux individuellement et en ajoutant un écouteur d'événement à chacun d'eux est vraiment très commun.
Nous allons le voir tout le temps dans les prochains projets que nous ferons.
La dernière chose que je vais mentionner ici est que vous n'avez pas toujours à utiliser une fonction anonyme comme nous l'avons fait ici où vous écrivez la fonction avec des parenthèses et vous ne lui donnez pas un nom.
Vous n'avez pas à le faire.
Vous pouvez déclarer une fonction nommée séparément comme je l'ai fait ici.
Fonction de changement de texte et puis tout ce que nous avons à faire est de dire le bouton qui ajoutent l'écouteur d'événement ou cliquez et puis nous lui donner le changement de texte.
Notez que nous n'avons pas de parenthèses par la suite car j'exécuterais immédiatement la fonction qui n'est pas ce que nous voulons.
Donc, nous ne faisons que passer la valeur de cette fonction, nous passons le contenu essentiellement à cet auditeur rapide et dire ici est la fonction que je veux que vous exécuter lorsque l'utilisateur clique sur ce bouton.
Mais ne l'exécutez pas encore.
Donc, ces deux vont fonctionner exactement la même chose.
C'est juste une question de préférence.
Pour la plupart, il ya des différences que nous pouvons rencontrer plus tard.
Je préférerais beaucoup utiliser cela.
Le seul moment où je ne voudrais pas utiliser une fonction anonyme est si je devais utiliser ce code à nouveau ailleurs en dehors de l'écouteur d'horloge.
Donc, si je voulais le faire moi-même individuellement ou je voulais l'exécuter au lieu d'un autre écouteur rapide plutôt que de dupliquer cette fonction, je lui donnerais un nom, puis dupliquer juste le nom où je l'utilise deux fois.
OK pour la prochaine fois que vous allez avoir la chance de faire quelques exercices rapides en utilisant Wisner rapide et certaines des choses que nous avons appris dans les dernières vidéos.