OK, vamos voltar.
De volta à introdução ao javascript, mencionei que uma das razões importantes para aprender javascript é
que podemos usá-lo para tornar nossas páginas interativas.
É como podemos executar o código quando um usuário clica em um botão ou digita algo ou atinge a tecla de seta ou o
que quer que eles façam.
Podemos ter algum código correspondente que seja executado em um determinado momento não apenas executado
no início da página.
Então, para fazer isso precisamos conversar sobre os eventos Dom.
Então, este vídeo será uma introdução aos eventos Dom.
Conceitualmente, o processo para configurá-los e também a sintaxe.
Então, como mencionei, os eventos estão em toda parte.
Pense quando você interage com a página da Web as diferentes coisas que acontecem você pode clicar em
coisas como um botão que você pode passar por cima de um link e algo pode aparecer.
Você pode arrastar e soltar elementos em determinadas páginas.
Você pode querer ter o código que é executado a partir do usuário com cliques duplos ou, na verdade, esta página
da Web tem alguns exemplos.
Este slide dot com é um site da Web e tocando as teclas de seta para a esquerda e para a direita para mudar os slides.
Então, algum código está sendo executado quando eu toco a tecla de seta para a esquerda ou a tecla de seta para a direita ou quando
eu clicar aqui.
Isso também é um evento e está fazendo algo que está executando algum código que está mudando o slide atual.
Então o ponto é que os eventos estão em todo o lugar e eles são realmente emocionantes.
É um dos meus tópicos favoritos para ensinar porque agora podemos fazer nossas páginas da web
interativas, podemos levar as coisas de manipulação que aprendemos sobre a mudança de cores mudando de
texto e então podemos realmente fazer isso quando algo em particular acontece.
Então, isso realmente destranca o potencial de manipular o dormitório.
É assim que vamos fazer jogos. É assim que vamos fazer valentes de formulário tic
tac toe, vamos fazer um jogo de seleção de cores realmente legal e que tudo decorre desses eventos.
Assim, a maneira como esses eventos funcionam é que nós realmente os anexamos a elementos específicos para que nós
selecionemos um elemento como o primeiro botão ou o segundo H-1 ou a entrada onde um tipo é igual ao texto e, em seguida,
anexamos um ouvinte de evento a esse elemento selecionado.
talvez estivéssemos ouvindo um clique em um botão, podemos ouvir um evento de deslocamento em um H1, podemos ouvir um evento de imprensa
de tecla em uma entrada de texto e falaremos mais sobre as diferenças entre esses eventos.
Então, como exemplo,
Há tantos tipos diferentes de eventos em javascript, mas o que é importante é que
temos que ter um evento que está sendo ouvido em um determinado elemento.
Então, como antes, quando eu falava sobre selecionar e depois manipular, isso ainda se aplica.
Precisamos selecionar algo e então a manipulação que acontece é nós, adicionando um ouvinte de
eventos a essa coisa que selecionamos.
Existe um método em particular que vamos usar todo o tempo, que é chamado de "add ouvidor de eventos".
de entrada porque a senha e nós temos algo selecionado, então chamamos de adicionar ouvinte de eventos e damos dois argumentos.
Então, no ouvinte de eventos é o que usamos uma vez que selecionamos um elemento como o primeiro botão
ou o tipo
O primeiro é o tipo de evento para o qual queremos ouvir.
E o segundo argumento é o código que queremos executar quando esse evento acontece.
Então aqui está um exemplo.
Estou selecionando o primeiro botão em uma página na verdade, não importa onde o botão é ou como
ele se parece ou qualquer coisa apenas qualquer botão.
estou chamando o botão no ouvinte do evento, clique e depois o segundo argumento é uma função que vai até aqui.
E então eu
E este código não é executado imediatamente.
Lembre-se disso é chamado de retorno de chamada.
Este código não é executado imediatamente.
É executado apenas quando este evento dispara.
Então, uma vez que você clicar no botão, o javascript vai para trás.
Esta função diz que é seu momento para brilhar e volte aqui pronto, vamos executá-lo.
E então esse código é executado e nós recebemos conselhos, não acesse alguém, clique no botão.
Portanto, esta função será executada sempre que um botão for rápido para executar com
o botão específico que selecionamos como clicado.
Então, aqui está outro exemplo.
Este caso eu tenho a marca aqui um botão e um parágrafo e eu selecionei ambos com o seletor Kery e eu os salve
ambos para variáveis ​​e então tudo o que fazemos é adicionar um ouvinte de clique, então o botão adiciona
ouvinte de evento clique e então o O segundo argumento é essa função de retorno de chamada.
botão é clicado é alterado o conteúdo do texto dos parágrafos para ser alguém clicar no botão e
você pode ver quando eu clicar nesse botão que ele muda de ninguém que me clicou e que alguém clicou no botão.
E o que vamos fazer sempre que o
Então, agora vou fazer uma demonstração rápida usando nossa página de demonstração do Dom, vamos começar fazendo isso
H-1 aqui.
Altere a cor quando um usuário clica nele.
Então, para fazer isso, precisamos começar sempre selecionando o H-1.
Então temos um monte de opções lá.
Eu vou apenas usar o documento do seer diferente que consulta o seletor H-1, certifique-se de que o possamos.
Tudo bem.
Então, basta escrever H-1 que adiciona o ouvinte de eventos.
Lembre-se de que há dois argumentos.
O primeiro é o evento que estamos a ouvir.
E passaremos mais algum tempo a falar sobre os diferentes eventos, as diferentes opções.
Por enquanto, estamos apenas clicando e o segundo é o código que queremos executar quando o usuário clicar.
Então, funcione e comece realmente simples e apenas faça um alerta quando o usuário clicar.
Então, vamos fazer um alerta, cada um clicou assim.
E agora vamos entrar.
Nada muda imediatamente.
Mas agora, se eu clicar naquele, então vou fechar isso.
Se eu clicar em qualquer lugar da página.
Além do H-1, nada acontece.
Assim que clicar no H-1, porém, ele me diz que H-1 estava correto.
Então isso é importante.
significa que posso ir aqui e clicar porque lembre-se se eu inspecionar isso, o H-1 vai todo o caminho pela
tela.
Aplica-se apenas ao H-1, mas isso
Então, apenas algo para ter em mente que é bom para nós, neste caso, mas aparecerá ocasionalmente, onde
as coisas se comportam um pouco diferente do que você pode querer e você precisa usá-los CSSA
talvez para encurtar o primeiro estágio ou você mudar o seu ouvinte de qualquer maneira.
Então, em vez de apenas alertar Vamos tentar fazer outra coisa.
E se eu acabei de acertar na seta para cima e adicione o ouvinte de
evento, clique e eu altero o código aqui e eu faço algo como H-1 que o estilo de fundo é igual e vamos fazer fundo laranja e laranja.
atenção ao que acontece, a primeira coisa que acontece é que ainda diz em um alerta que H-1 foi clicado.
Mais uma vez, nada muda imediatamente, mas quando clico em prestar
E então, quando eu fechar isso, ele muda para ser laranja.
Então, a moral aqui é que podemos ter mais de um ouvinte em um determinado elemento.
Quando clicamos nesse H-1, o primeiro ouvinte que adicionamos estava escutando um clique e executou um alerta e
depois adicionamos outro ouvinte que também escutou um clique, mas mudou a cor de
fundo.
Então, quando eu clicar em ambos, execute.
laranja, é claro, você não vê isso porque já era laranja, mas você tem que confiar em mim.
E isso sempre acontecerá por enquanto, se eu clicar novamente, recebo o alerta e mudou para
Ele continua mudando a laranja uma e outra vez.
OK, eu vou atualizar e me livrar de tudo isso.
Eu também quero fazer uma demonstração rápida, adicionando um ouvinte à UL.
Então, faça um seletor de consulta de despejo de documento UL e lembre-se que temos três aliados em vez de apenas um ul.
Então, eu vou mostrar o que acontece quando o configuramos em um elemento pai como esse.
Bem, e não vou usar uma variável, só vou fazer isso aqui.
Ouvinte Adamant.
Clique.
Então esse é o primeiro argumento.
O segundo é a função que
queremos executar assim.
E vou começar.
Vamos apenas fazer um console que logue bem foi cliques e você sabe o que.
Essa é uma voz passiva.
Péssima ideia.
Vamos fazer.
Você clicou na UL muito melhor.
ESTÁ BEM.
Então, mantenhamos o console aberto e vamos clicar na UL.
Mas como vamos clicar no óleo.
Porque o poço tem três aliados dentro dele.
A UL é toda essa coisa aqui.
Então, qualquer coisa rápida não importa qual aliado eu estou em qualquer lugar do poço.
Você pode ver o número de incrementos aqui.
Qualquer rápido no bem, ele vai executar este log de ponto de console.
Então, vamos atualizar mais uma vez e desta vez vamos dizer que eu quero mudar o aliado em si.
Quando eu clico em um aliado individual, quero que algo aconteça.
Existem algumas maneiras de fazer isso.
E vamos começar com apenas o mais simples que está anexando um ouvinte a cada aliado como
chefe.
O que faremos eventualmente é anexar um ouvinte ao UL e, em seguida, dentro desse ouvinte.
Nós vamos detectar quais mentiras especificamente dentro da UL foi clicado em tudo com um Lessner.
Por enquanto, porém, vamos adicionar um ouvinte separado a cada mentira,
então precisamos começar selecionando os Aliados para que nossos aliados sejam iguais ao seletor de ponto do documento, todos aliados garantem que todos os possamos.
Tudo bem, então precisamos fazer um loop for.
Então, para var I é igual a zero.
Lembre-se que eu disse que estaria fazendo isso o tempo todo.
Então, eu não sou mais do que aliados, esse comprimento eu mais mais,
assim como isso.
E então, dentro daqui, vamos adicionar um ouvinte a cada aliado individual.
Então isso parece assim.
Elyse I, de modo que nos dá o aliado
específico e o ouvinte do evento clicar na função assim e fazer isso um pouco.
E depois o código que queremos executar.
Vamos mudar a cor do aliado que foi clicado e vamos apenas mudá-lo para ser roxo.
Então, temos algumas opções diferentes.
O que eu preciso fazer é se referir ao aliado que foi clicado.
Então, eu poderia fazer esses aliados, embora não seja realmente uma ótima solução porque há uma
maneira muito mais fácil de fazer o que é usar essa palavra-chave.
Então, dentro de um ouvinte, a palavra-chave refere-se ao item que foi clicado ou ao item que foi suspenso ou
ao item em que a pressão de tecla ocorreu em qualquer lugar que o elemento que está bem
antes do evento, independentemente do que for selecionado, é o que isso refere-se a.
Então eu posso escrever esse estilo de ponto que a cor é igual ao roxo.
E, na verdade, isso é algo mais óbvio.
É uma fonte pequena.
Então, vamos fazer o rosa assim.
Eu bati enter.
Nada acontece imediatamente, mas se eu clicar em um aliado, você pode ver que ele muda para ser rosa.
E se eu continuar clicando, continue mudando para rosa. Você simplesmente não pode contar.
Então, esse padrão aqui de selecionar um monte de coisas que os acompanham individualmente e adicionar um ouvinte
de eventos a cada um deles é realmente muito comum.
Nós vamos ver isso o tempo todo nos próximos projetos que fazemos.
uma função anônima como fizemos aqui onde você escreve a função com parênteses e você não lhe dá um nome.
A última coisa que vou mencionar aqui é que você nem sempre tem que usar
Você não precisa fazer isso.
Você pode declarar uma função nomeada separadamente, como fiz aqui.
O texto de mudança de função e, em seguida, tudo o que temos a fazer é dizer botão que adiciona ouvinte de
evento ou clique e, em seguida, damos-lhe mudar de texto.
Note que não temos parênteses depois porque eu executaria a função imediatamente, o que não é
o que queremos.
este ouvinte rápido e dizendo que aqui é a função que eu quero que você execute quando o usuário clica neste botão.
Então, estamos passando o valor dessa função, estamos passando o conteúdo basicamente para
Mas não execute isso ainda.
Então, estes dois funcionarão exatamente o mesmo.
É apenas uma questão de preferência.
Na maior parte, há algumas diferenças que podemos encontrar mais tarde.
Eu preferiria usar isso.
A única vez que eu não usaria uma função anônima é se eu precisasse usar esse código novamente em
algum lugar fora do ouvinte do relógio.
Então, se eu quisesse executá-lo individualmente ou queria executá-lo em vez de outro ouvinte rápido, em
vez de duplicar essa função, eu lhe daria um nome e, em seguida, duplicaria apenas o nome onde
eu uso duas vezes.
Ok, então, depois, você terá a chance de fazer alguns exercícios rápidos usando o rápido Wisner e algumas
das coisas que aprendemos nos últimos vídeos.