Tudo bem, de volta.
Neste vídeo, eu quero falar um pouco mais sobre alguns dos diferentes tipos de eventos até o
momento, encontramos o evento de clique e o evento de mudança que usamos em uma entrada de texto ou uma entrada de
número no aplicativo de pontuação.
Vou começar apresentando o M. B. UMA. referência do evento.
Então, essa é a página da web em que estou aqui.
E esta página web é uma referência para todos os eventos diferentes que são reconhecidos pela API DOM.
E se nos deslocarmos para baixo, você pode se surpreender com quantos existem.
E eu realmente vou ter você no próximo exercício, escreva algum código apenas para contar
quantos há é um divertido exemplo prático de usar a geometria dos contras. Então, você vai contar quantos há, mas por agora só sei que há uma
tonelada deles e provavelmente há cinco ou seis talvez até 10 pessoas realmente comuns que
usarão o tempo todo como arrastar e soltar para um evento que flui para o clique, talvez seja um clique duplo, pressione os eventos
de tecla, mas, de outra forma, muitos mais obscuros nunca usarão ou talvez você os use uma vez em um projeto.
Mas é bom saber que esta página web existe
que há tantos eventos que talvez nunca possamos usar.
elemento com o mouse.
E este vídeo vou me concentrar em dois eventos em particular, que tem a ver com pairar tão pairando sobre um
E esses são chamados de mouse e mouse.
Então eu tenho um aplicativo simples e vou fazer com que ele seja chamado para
fazer essa idade dele no meu novo arquivo e eu só vou adicionar meu boilerplate regular e isso não vai ser uma lista completa de tarefas.
Nós não poderemos adicionar novos ou o que vamos fazer é ter uma UL com três ou quatro aliados.
Coisas como o gato de alimentação do gato da lavagem e nós faremos o gato para o cachorro e salve.
Então nós temos nossos três para fazer e isso é tudo o que precisamos por enquanto.
E o que eu quero fazer.
Eu vou abrir isso no navegador.
Eu quero ser capaz de clicar e isso deve
cinza para fora do item para fazer e talvez tachado ele coloque uma linha através dele.
Mas eu também quero poder pairar e eu quero saber qual eu estou passando.
Então eu recebo esses comentários agradáveis ​​dos usuários enquanto eu passo sobre um desses.
Talvez você tenha mudado de cor ou o negrito começará apenas tornando-o
verde e há tantos efeitos agradáveis ​​que você pode fazer para o seu usuário usando esses eventos hover.
Então, vou mostrar isso agora, antes que possamos realmente escrever qualquer javascript, porém precisamos fazer nosso arquivo.
Então eu vou salvar um novo arquivo e eu chamarei isso para fazer.
Sim.
E como
sempre eu tinha o meu alerta conectado salvar, volte aqui e adicione nosso script na parte inferior e nossa fonte é igual ao deuce dot J. S. e vamos economizar ou atualizar e recebemos nosso alerta.
Isso significa que está funcionando.
Vamos ao primeiro evento que
mencionei e a primeira coisa que precisamos fazer é selecionar algo antes de podermos manipular.
Então, vou começar por fazê-lo até a primeira mentira.
Então, eu vou usar o documento de var
e alo primeiro ECO e eu vou fazer um seletor de consultas e lembrar que isso me dá a primeira mentira porque eu não fiz
um seletor de consulta e depois vou adicionar meu ouvinte de eventos primeiro aliado.
Então, fomos
primeiro ally add event listenener e o evento que estamos ouvindo não é clicar no mouse.
E então nós damos nossa função de retorno de chamada.
E do jeito que o mouseover funciona, ele dispara assim que começarmos a passar por algo.
e agora e o segundo e agora e este primeiro.
Então, se eu estivesse trabalhando com este último aliado, meu mouse passaria fogo agora
Então, é quando o avanço começa.
Então, primeiro, eu adicionaria o wrestler do evento
e simplesmente fazemos um registro em vez de um mouse de retorno de chamada e, se atualizarmos, abra nosso
console, lembre-se de que nós apenas o fizemos para o primeiro aliado e lá nós vamos, nós conseguimos um mouseover.
Também é importante notar que não está disparando continuamente a cada momento.
Você sabe que estamos por cima disso, é quando o nosso passar do mouse sobre um elemento realmente começa.
registro ou seja qual for o código que temos no retorno de chamada.
Então, isso é útil para que não estivésemos constantemente, você conhece constantemente o
Isso só acontece quando nos deslocamos inicialmente.
Então, em vez de simplesmente cancelar esse registro, vamos trabalhar em mudar a cor do aliado.
Vamos torná-lo verde.
Então, quando voce passa, fica verde.
Então, precisamos fazer o primeiro
estilo de ponto aliado que a cor é igual a verde e economizamos a atualização e agora vejo que vou torná-lo um pouco maior e torná-lo
um pouco maior aqui e atualizar quando eu começar o mouse, ele fica verde.
E então, quando eu sair, fica verde o que não é o que queremos.
Nós só queremos que este seja um efeito de deslocamento.
Então, quando eu desliso sobre o aliado, ele fica verde.
Mas quando eu parar, ele volta a ser
preto para fazer isso, nós realmente precisamos de outro evento e esse evento disparará quando o nosso passarinho acabar.
Então, quando deixamos esse elemento e é chamado Mouse, então vamos fazer o mesmo primeiro aliado.
Mas no evento Lessner sair.
E, em seguida, nossa função de retorno de chamada e vamos apenas fazer uma primeira cor de ataque de estilo de mosca e configurá-lo de volta ao preto.
Assim, e se atualizarmos, você pode ver que fica verde e depois
o mouse volta para preto e mouse sobre um verde e assim por diante.
Então, agora conseguimos esse pequeno efeito constante
que nos mostra o que estamos passando, basicamente, o que fazer é selecionado.
Então, vamos fazer com que isso funcione para cada única mentira.
São apenas algumas pequenas mudanças que precisamos fazer.
E o primeiro deles é que precisamos selecionar todos os aliados.
forneça uma lista com os três aliados.
Vão mudar muito variável para ser mentirosos, documentado, consulta todas as alias para que nos
E, claro, infelizmente, não podemos simplesmente fazer isso mentiras que um ouvinte de eventos que não funciona.
Precisamos fazer um loop para quatro de nossos iguais zero.
Eu menos que mentiras que ligam.
Plus plus.
E espero que você esteja começando
a sentir-se um pouco mais confortável fazendo isso adicionando eventos ou manipulando algo em vez
de um loop onde selecionamos um monte de eles e então seguimos e fazemos algo individualmente.
Como eu disse
alguns vídeos, realmente padrão comum realmente importante que começamos a ficar confortáveis ​​com ele.
Então, dentro daqui, em vez de fazer a primeira coisa, eu adicionaria o ouvinte de eventos.
Estamos trabalhando com aliados de olhos de suporte, de modo que seja nosso aliado individual.
E então eu vou apenas copiar este código e há um problema com este código.
Quero dizer, ele funcionará, mas não vai funcionar da maneira que queremos.
O que acontecerá é que estamos adicionando um ouvinte de eventos a cada aliados aliados.
Mas quando passamos por cima de qualquer um deles, estamos apenas mudando o primeiro estilo de ponto aliado de cor preta.
E na verdade não funcionará porque a primeira mentira já não está definida.
Nós mudamos o nome.
Mas isso não é o que queríamos de qualquer maneira.
Queremos que seja o aliado que esteve sobre o ocorrido no evento do mouse sobre o evento.
Então, podemos mudar isso para a palavra isso.
Lembre-se de que a palavra-chave, em vez de um ouvinte
de eventos, refere-se ao item ou ao elemento em que o evento foi ativado.
Então, esse estilo, mas colorido, igual a tela e então vamos apenas duplicar esse código novamente.
Mas ao invés de passar o mouse sobre nós, faremos um mouse e,
ao invés de ir ao Green, iremos de volta ao preto e então podemos nos livrar disso e atualizar e lá vamos.
Nós temos o nosso pequeno e pequeno efeito.
Então, a última coisa sobre a qual eles falarão é adicionar um ouvinte de cliques apenas para tornar isso um pouco mais completo.
Então, a mesma coisa que eu pensei ter ouvinte de evento clicar em adicionar ou uma função de retorno de chamada.
E o que vamos fazer aqui é usar uma classe.
Então eu vou simplesmente adicionar a classe primeiro.
classe de início que alterna.
Não existe, mas vou dizer que isso faz a lista de aula e vai alternar a lista de
E acabaremos de chamar a classe.
Então, o ponto é que eu posso clicar em um desses e ele deveria ter um efeito Strikehrough.
E mesmo que eu não tenha uma classe definida, ela ainda é adicionada para
que eu possa mostrar que abre o console e inspecionamos um desses.
E, em seguida, vamos clicar nele e você pode ver ou
clicar no primeiro que você pode ver, pelo menos, a cor verde e preta mudando aqui como um hover.
Mas quando eu clicar neste primeiro, você pode ver isso adicionando a classe feita.
E então eu clico novamente e ele vai embora.
Então agora precisamos definir a classe feita.
Então vamos fazer isso agora.
Eu irei para
sublimar e criar um novo arquivo e eu vou salvar isso para fazer isso C Ss e a primeira coisa que fazemos é definir a nossa classe feita.
E eu vou dar um efeito tachado que fazemos com
a decoração de texto e estabelecemos essa linha e também alteramos a opacidade, de modo que a opacidade será 0. 5 e salve.
com eles como tag para Due's gutsiest us e podemos salvar.
E então, é claro, você precisa vincular isso para começar a avaliar ou envelhecer ele arquivo
Agora vamos testá-lo.
Você atualiza a página.
Eu desliso.
Então, são dois eventos que mudam a cor preto e verde.
E agora eu posso clicar e nós conseguimos um efeito tachado.
E esta linha também.
em vez de alterar a cor manualmente aqui.
Existem algumas pequenas mudanças que eu faria. No entanto, se retornarmos ao nosso arquivo javascript, o primeiro é
Mudando para ser verde e preto.
Eu acho ainda melhor fazer isso com a nossa própria classe.
Então eu vou fazer uma nova aula
e vou chamar essa selecionada e depois vou dizer que quando o texto selecionado ou a cor deve ser verde assim.
E então iremos com o Javascript.
E quando passamos o mouse sobre tudo o que queremos fazer é dizer que esta lista de classes adiciona selecionada.
para ativar partes de nossos C Ss e o SAS realmente se encarregará do estilo.
E isso retorna a essa idéia de separação de preocupações em que
não queremos os modelos individuais de manipulação de javascript, mas podemos usar o javascript
Então, isso lhe dará a classe selecionada quando
passarmos o mouse e quando sairmos ou quando bagunçaremos, faremos essa lista de classe burra remover selecionada e, se economizarmos, você pode ver que parece muito bom.
Nós clicamos, nós conseguimos nosso tachado.
Tudo bem.
Há um pouco para fazer a lista.
Então, esta é uma maneira um pouco melhor de fazê-lo.
Funcionalmente parece ser o mesmo.
É apenas uma prática melhor usar classes em vez de adicionar e ajustar estilos um de cada vez.
Então, para resumir, vimos dois novos eventos, mouseover e mouse.
E também obtivemos mais prática ao configurar eventos em vez de um loop em que usamos essa palavra-chave