1 00:00:00,260 --> 00:00:01,440 OK, vamos voltar. 2 00:00:01,440 --> 00:00:06,330 Até agora, falamos sobre como podemos selecionar os elementos com J Querrey e também como 3 00:00:06,330 --> 00:00:06,810 podemos manipulá-los. 4 00:00:06,990 --> 00:00:11,790 Agora, iremos apresentar a grande parte faltante final, que é evento na consulta J. 5 00:00:11,850 --> 00:00:13,700 Então pense em voltar para Vanilla J. S. Quando adicionamos ouvintes de eventos, usamos um método chamado de ouvinte de eventos. 6 00:00:13,740 --> 00:00:17,780 Bem, parece que Jay, onde ele tem uma tonelada de métodos que têm que ver com eventos. 7 00:00:18,150 --> 00:00:22,230 Então eu tenho a seção de evento aberta em Jake, onde ele pode chegar lá, apenas clicando em eventos aqui. 8 00:00:22,350 --> 00:00:28,190 Então, enquanto me deslizo até aqui, você pode ver apenas quantos. 9 00:00:28,260 --> 00:00:32,720 Os métodos do evento de Coria existem chikor, ele vem com uma tonelada deles. 10 00:00:32,810 --> 00:00:37,210 Então, o que eu vou fazer é destacar as três mais importantes as três que você pode usar. 11 00:00:37,230 --> 00:00:41,820 Noventa e nove por cento do tempo, esses três métodos são pressionados e pressionados rapidamente. 12 00:00:41,830 --> 00:00:49,190 E eu disse que esses três você poderia usar 99% do tempo. 13 00:00:49,650 --> 00:00:53,010 Na verdade, é mais como este aqui. 14 00:00:53,160 --> 00:00:55,950 Você pode usar 99% do tempo. 15 00:00:55,950 --> 00:00:58,050 Então, eu vou mostrar-lhe clique e pressione 16 00:00:58,110 --> 00:01:03,000 a tecla primeiro, mas meu objetivo principal é mostrar o quão incrível é o método. 17 00:01:03,030 --> 00:01:04,600 Então vamos começar. 18 00:01:05,130 --> 00:01:06,450 Então Jay equerries método rápido 19 00:01:06,450 --> 00:01:12,030 é como podemos adicionar muito rapidamente e facilmente um ouvinte de cliques a um único elemento ou a uma coleção de elementos. 20 00:01:12,030 --> 00:01:14,620 Então, você pode ver que eu tenho dois exemplos neste caso. 21 00:01:14,730 --> 00:01:18,210 Estou selecionando algo e depois adicionando um ouvinte de clique com um clique. 22 00:01:18,210 --> 00:01:22,070 Então, selecionamos algo com a idéia de enviar, que corremos. 23 00:01:22,290 --> 00:01:26,070 Clique nele e depois passamos uma função de retorno de 24 00:01:26,100 --> 00:01:32,490 chamada e esta função de retorno de chamada será executada quando algo clicando na idéia de enviar. 25 00:01:32,490 --> 00:01:34,470 E porque é uma ID, há apenas uma na página. 26 00:01:34,680 --> 00:01:37,400 Então, quando esse item é clicado, este código é executado. 27 00:01:37,530 --> 00:01:40,920 Se você der uma olhada abaixo, pode ver que 28 00:01:41,340 --> 00:01:46,290 eu estou selecionando todos os botões na página, que pode ser um. 29 00:01:46,290 --> 00:01:46,650 Podem ser 10 botões e eu estou adicionando um ouvinte de clique a todos eles. 30 00:01:46,650 --> 00:01:51,080 Então, sempre que um botão for rápido, ele alertará alguém clicar no botão. 31 00:01:51,120 --> 00:01:55,800 Então, deixe-me demonstrar isso. 32 00:01:55,830 --> 00:01:56,760 Agora eu tenho uma página HTL simples com o Jay que inclui como CDN. 33 00:01:56,750 --> 00:02:03,480 E eu vou adicionar em vamos fazer eventos de consulta Jay e vou adicionar alguns botões. 34 00:02:03,750 --> 00:02:10,730 Então, o primeiro que eu digo não me corrija. 35 00:02:11,370 --> 00:02:15,240 E então o próximo vai dizer seriamente, sim. 36 00:02:16,020 --> 00:02:21,230 E o último irá dizer que este é o seu último aviso. 37 00:02:21,390 --> 00:02:27,690 Então, vamos salvar e abrir isso no navegador e sempre verificar que J carregou. 38 00:02:28,080 --> 00:02:36,300 ESTÁ BEM. 39 00:02:38,320 --> 00:02:38,780 Parece bom. 40 00:02:38,850 --> 00:02:40,040 Então vamos começar fácil aqui, adicionando um ouvinte rápido a este H-1 e só existe um na página. 41 00:02:40,650 --> 00:02:46,110 Então, precisamos selecionar primeiro com sinal de dólar. 42 00:02:46,110 --> 00:02:50,170 Então, um que nos dá o direito H-1, que apenas um e depois corremos. 43 00:02:50,680 --> 00:02:55,610 Não clique nisso e então precisamos passar em uma 44 00:02:55,640 --> 00:03:02,220 função de retorno de chamada que será executada sempre que clicarmos nesse H-1. 45 00:03:02,220 --> 00:03:03,670 Então, o clique das 46 00:03:03,690 --> 00:03:11,010 cenas está usando um ouvinte de eventos e está adicionando um ouvinte de cliques neste H-1 e podemos fazer 47 00:03:11,010 --> 00:03:18,540 uma função anônima que é muito mais comum de ver, mas um pouco mais intimidante para estudantes mais novos ou 48 00:03:18,600 --> 00:03:24,120 podemos escrever uma função nomeada separadamente e depois passa o nome dessa função aqui. 49 00:03:24,120 --> 00:03:24,940 Mas, como eu disse, as funções anônimas são muito mais comuns. 50 00:03:25,260 --> 00:03:27,900 Então, o que queremos fazer é apenas alertar 51 00:03:28,200 --> 00:03:37,080 cada um correto e vou acertar entrar aqui e agora, se eu clicar neste H-1, você verá que eu encerrei H-1 e isso não acontece em nenhum outro elemento. 52 00:03:37,130 --> 00:03:42,380 Acontece por aqui, lembre-se porque meu H-1 vai todo o caminho pela tela para 53 00:03:42,630 --> 00:03:48,990 que CSSA emita se eu quiser mudar o tamanho daquele, mas só acontece quando eu clico no elemento. 54 00:03:48,990 --> 00:03:54,990 Agora, o que eu quero fazer é mostrar como podemos adicionar um ouvinte rápido a uma coleção de elementos. 55 00:03:54,990 --> 00:04:00,020 Então vou selecionar todos os botões aqui. 56 00:04:00,150 --> 00:04:02,530 como nosso retorno de chamada. 57 00:04:02,640 --> 00:04:12,630 Então, um botão de sinal de dólar e, em seguida, adicionamos nosso clique exatamente assim e podemos passar uma função anônima novamente 58 00:04:12,630 --> 00:04:14,050 E isso será 59 00:04:14,580 --> 00:04:24,420 executado sempre que qualquer botão for clicado e nós apenas faremos um botão de alerta, clique nisso e pressione enter. 60 00:04:24,420 --> 00:04:27,130 E agora, se eu clicar em qualquer um desses botões, vamos clicar no botão botão clicar sair. 61 00:04:27,630 --> 00:04:35,470 Então, considere o javascript de vanilla para adicionar um ouvinte de eventos a uma coleção de botões. 62 00:04:35,490 --> 00:04:41,150 Eu teria que selecioná-los todos com o seletor de consulta ou obter elementos por nome de etiqueta e então 63 00:04:41,190 --> 00:04:46,380 eu teria que usar um loop para fazer um loop para todos eles e então eu teria que 64 00:04:46,380 --> 00:04:51,240 adicionar individualmente um ouvinte de eventos que para ser claro está acontecendo Por trás das cenas. 65 00:04:51,240 --> 00:04:54,780 Mas tudo o que tenho a fazer é escrever esta linha e isso vai me fazer uma correspondência 66 00:04:54,870 --> 00:04:59,700 que irá adicionar os ouvintes do evento individualmente, o que torna sua vida realmente fácil em vez de apenas um botão de aprendizado clicado. 67 00:04:59,730 --> 00:05:05,660 E se eu quisesse mudar o estilo, altere a cor de fundo do botão que foi clicado. 68 00:05:05,820 --> 00:05:10,940 Então eu precisaria adicionar um ouvinte de cliques novamente. 69 00:05:11,430 --> 00:05:13,970 Estou apenas na seta para cima e ao invés de alertar. 70 00:05:13,970 --> 00:05:16,780 O que faremos é mudar a 71 00:05:17,040 --> 00:05:26,730 cor do plano de fundo para que seja algo que o fundo do C-s s e nós o mudaremos para ser rosa. 72 00:05:26,730 --> 00:05:30,290 Então, a questão é o que estamos chamando Dotsie CSSA e devolvemos com o javascript da bailada. 73 00:05:30,450 --> 00:05:36,090 Nós usamos isso. 74 00:05:36,090 --> 00:05:37,360 A palavra-chave, isso e aquilo, 75 00:05:37,380 --> 00:05:43,530 refere-se ao elemento que foi clicado no entanto a consulta NJ que não funcionará bem o que precisamos fazer é usar a versão J Querrey disso. 76 00:05:43,530 --> 00:05:49,720 Este é sempre um pouco de uma idéia confusa. 77 00:05:49,950 --> 00:05:53,010 Eu acho que isso ajuda a lembrar que o que 78 00:05:53,010 --> 00:05:58,830 Shakeri faz é que é claro simpatizar sim e isso envolve na consulta Jay e é grande J. UMA. G. Abrace e isso lhe dá algumas propriedades e métodos especiais. 79 00:05:58,830 --> 00:06:03,830 Então, se queremos usar 80 00:06:03,840 --> 00:06:10,680 o ponto CSSA que é um método de consulta J, temos de garantir que o estamos executando em um objeto de consulta J. 81 00:06:10,950 --> 00:06:12,660 Então, simplesmente velho, este é o jato regular da baioneta isso. 82 00:06:12,660 --> 00:06:17,560 Então precisamos envolvê-lo e dizer que esta é a versão de consulta J. 83 00:06:17,670 --> 00:06:21,440 Então vamos testar isso. 84 00:06:21,660 --> 00:06:23,190 Clique em entrar aqui 85 00:06:23,370 --> 00:06:30,630 e agora vamos clicar no botão primeiro, nós temos esse alerta porque nunca nos deshei do primeiro ouvinte de cliques. 86 00:06:30,630 --> 00:06:32,460 E então o fundo muda para rosa e você pode ver que isso acontecerá com cada um que eu clicar. 87 00:06:32,880 --> 00:06:40,280 Também poderíamos fazer algo assim. 88 00:06:40,440 --> 00:06:42,010 Então eu acerco a seta para cima e eu atualizo a página em vez de apenas mudá-los para ser rosa. 89 00:06:42,030 --> 00:06:47,610 Nós também poderíamos fazer um cancelamento desse registro e o adulto da Walcott registrar o texto do botão que foi clicado. 90 00:06:47,670 --> 00:06:55,540 Então, seria algo como você clicou mais e então eu vou fazer uma variável para armazenar esse texto tão 91 00:06:55,650 --> 00:07:03,870 variável que equivale a sinal de dólar deste ponto e para obter esse texto fora de lá, precisamos usar o 92 00:07:04,560 --> 00:07:14,040 método de texto exatamente como esse kaso que logar você clicou em nós, que é o nosso nome de variável e entre. 93 00:07:14,460 --> 00:07:22,430 E agora, se eu clicar em um que você clicou, não clique em você, você clicou. 94 00:07:22,920 --> 00:07:27,510 Este é o seu último aviso. 95 00:07:27,540 --> 00:07:28,890 E você clicou. 96 00:07:29,460 --> 00:07:30,360 Sério, não me chame. 97 00:07:30,420 --> 00:07:31,830 ESTÁ BEM. 98 00:07:32,190 --> 00:07:32,640 Então, é tudo o que eu vou demonstrar. 99 00:07:32,670 --> 00:07:33,930 Clique. 100 00:07:33,930 --> 00:07:34,650 Para resumir, podemos adicionar um ouvinte a um elemento por vez como fizemos pelo H-1. 101 00:07:34,650 --> 00:07:39,520 Ou podemos fazer isso em uma coleção, onde é realmente útil. 102 00:07:39,780 --> 00:07:43,870 E, por último, se queremos referir-nos ao elemento que foi clicado, 103 00:07:43,890 --> 00:07:49,320 precisamos usar o sinal de dólar, esse é o invólucro de J queery o J. UMA. G. versão da baunilha. 104 00:07:49,680 --> 00:07:53,670 sim este 105 00:07:53,690 --> 00:07:54,480