Série de modelos de objetos de documentos 2023 — Parte 5: Hierarquia de eventos, captura e bolhas de vendas

1. Introdução do curso — Captura e Capturing: Bem-vindo, bem-vindo, bem-vindo a mais uma aula muito emocionante e uma série inteira sobre o DOM, o Modelo de Objeto Documento. Sou Clyde, serei seu instrutor e a perda de Gerst será muito avançada. Mas não se preocupe, se você é novo no desenvolvimento, vou explicar o básico. Mas se você é um novo desenvolvedor e você não tem me seguido em minhas outras classes anteriores. Eu encorajo você a fazer isso primeiro porque todos eles se acumulam uns sobre os outros para chegar a este ponto, colocando que todos os lados são o que é esta cláusula tudo sobre? Bem, vou dar um passo atrás. Você sabe que os diferentes objetos no DOM, certo? Temos objetos nativos e temos objetos JavaScript, que são diferentes uns dos outros. E todos eles têm suas próprias propriedades e métodos. Essas propriedades e métodos vêm como resultado do que é conhecido como herança. E é muito importante para você entender essa estrutura hierárquica, é por isso que nesta classe eu vou começar explicando o que é a estrutura hierárquica e o que eu quero dizer por herança. Mas depois disso, discutimos dois conceitos muito, muito importantes quando se trata de eventos. Lembre-se, na aula anterior, discutimos eventos, muitos detalhes. Bem, você concorda comigo que os eventos têm que vir de algum lugar, certo? Bem, isso é uma forma conhecida como captura de eventos. Tem que começar de alguma forma e desceu para qualquer elemento que desencadeou esse evento, certo? Se for um botão, represente uma tag div, por exemplo, vamos viajar até o final do dia. Isso é conhecido como captura de eventos. Por outro lado, do outro lado da moeda, temos o evento borbulhando. E esse é um conceito que os eventos bolham na árvore DOM e é por isso que é importante saber sobre como navegar no DOM, que já cobrimos em uma classe anterior também. Então, realmente este curso vai ser pesado. Eu vou explicar isso em um nível muito, muito divertido e muito intuitivo. Portanto, não se preocupe se você não seguiu raramente em outras classes, a menos que você realmente está começando. E eu encorajo-te a pausar isto agora mesmo e depois voltar e curtir. Mas se você seguiu ao longo das notas, mas continuando, se você é bom com desenvolvimento, ótimo, você vai aprender algo novo. Conflito mesmo. Vamos cortar exemplos práticos. Eu vou estar lhe dando desafios. Isso vai ser muito honesto sobre os áudios dos seus alunos. E vejo-te no lítico dos filtros. 2. Objeto JavaScript em voadores em um objeto DOO: Esta vai ser uma seção incrivelmente interessante, bastante avançada ou pode acabar. E antes de começarmos a entrar em discussões complicadas sobre hierarquias e protótipos, quero pular para o console. Quero te mostrar por que praticamente pode se tornar uma coisa importante. E o que eu quero fazer é fazer duas coisas. Agora. Quero criar um objeto JavaScript e acessar seu protótipo. E eu quero criar um objeto DOM e acessar seu protótipo. By the way, se você não está muito certo do que um protótipo é, entrar em um monte de detalhes no meu curso de grande-master completo JavaScript. Então, por favor, confira se estiver interessado. Se você sabe o que são protótipos, ótimo, você será capaz de acompanhar. Se você não tem certeza e você não quer fazer o meu curso dessecate para apenas rapidamente Google ele. Em suma, o protótipo é como um período do qual você herda algo. Então, se um objeto não tem essa propriedade funcional exata que você está atrás passa praticamente indo para trabalhar seu caminho até a cadeia de protótipos para tentar descobrir que ele fez pouca propriedade que você é frequentemente. Então, de qualquer maneira, aqui estamos em um navegador de avião. Tudo o que eu quero fazer é abrir o console e eu quero apenas codificar duas coisas porque eu estou ferido muito, muito rapidamente. Vamos para a consola. Basta encaixar isso em uma nova janela. Lá vamos nós. E agora vamos começar a codificar. E deixe-me ampliar aqui só para que seja mais fácil de ver. Ok, então a primeira coisa que vou fazer é criar um objeto JavaScript. E isso define que o objeto é cão. E podemos dizer que este cão vai com simples o suficiente, certo? Mas você já se perguntou por que temos um monte de propriedades e métodos diretamente fora da caixa. Por exemplo, podemos acessar nosso objeto cão e olhar para todas essas propriedades e métodos. Eles são uma tonelada deles. Assim, por exemplo, podemos acessar em maiúsculas. Nós executamos isso, e é claro que pegamos lobo, mas agora tudo em letras maiúsculas. Por que é isso? Bem, o ponto de partida é entender protótipos. Se acessarmos nosso objeto cão e olharmos para seu protótipo. E nós adoramos isso para a tela. Nós obtemos este objeto string. Agora, o objeto string é nativo para JavaScripts. E se abrirmos esse objeto, ele tem um monte de propriedades e métodos, é claro, que este cão tem acesso. Então, se rolarmos para baixo, devemos ver duas maiúsculas. E aí está, duas maiúsculas. Então é por isso que temos certas coisas disponíveis para nós diretamente fora da caixa. E isso é, como eu mencionei, JavaScript. Mas agora vamos criar um objeto DOM, é definido em uma variável chamada p, e nesta instância lista xs. Vou documentar objetos e leads cria um elemento. Você vai saber a partir da parte 1 que este é um método DOM API criar elemento. Muito legal, certo? Acabamos de criar o nosso objecto. Mas agora se tentarmos acessar nosso objeto parágrafo, e novamente tentamos e agora executamos a mesma função que fizemos com o cão. Recebemos um erro de tipo para maiúsculas não é uma função. O que tem nesse tipo de estranho? Vamos novamente banco íngreme. Vejamos o protótipo. Então acessamos nosso objeto e olhamos para seu protótipo. Isso é interessante. Podemos ver aqui o protótipo não é string. Na verdade, seu protótipo é o elemento de parágrafo HTML. E se abrirmos este aplicativo, podemos ver que ele tem um monte de outras propriedades e métodos diferentes dos que criamos em JavaScript. Isso não é interessante? Então, antes de seguirmos em frente, eu queria que você entendesse por que tudo isso se torna importante. Precisamos começar a entender como as coisas estão vindo do fim. Um tipo estranho de se encaixa. E você pode realmente dizer que amplamente falando, dois tipos diferentes de objetos. Temos esses objetos JavaScript, que você verá na próxima palestra são chamados de objetos nativos. E nós também temos este outro objeto, chamá-lo de um objeto host que é fornecido a nós pelo host, neste caso pelo navegador. Mas eu só daria muito. Vejo-te na próxima palestra. 3. Host vs objetos nativos: Antes de avançarmos para discutir hierarquias e como tudo isso funciona, precisamos entender a diferença entre objetos nativos e host. E eu mencionei brevemente isso na palestra anterior, mas eu quero expandir um pouco mais agora. No meu curso de mestre completo de JavaScript, abordamos os protótipos em detalhes, então, por favor, confira se não tiver certeza. Mas colocando protótipos de lado, eu não quero que você se confunda entre objetos JavaScript e objetos DOM. Surpreendentemente, não há muita informação sobre isso na onda. Isso é muito difícil de encontrar, mas sem estresse. É exatamente por isso que estou aqui. Tudo bem, então por onde devemos começar? Sabemos que cada nó no DOM herda métodos e propriedades de seu nó pai. E se você quiser falar em linguagem JavaScript, poderíamos apenas dizer que cada objeto em JavaScript herda métodos e propriedades de seu objeto pai. É a mesma coisa. E quando se trata de JavaScript, praticamente tudo é um objeto. Não é bem verdade. Nem tudo em JavaScript é um objeto, mas quase tudo é. E é o mesmo no DOM. Praticamente tudo no DOM é um nó. O ponto que eu estou tentando fazer é que cada objeto ou cada nó contém uma propriedade privada que contém um link para seu protótipo. E vimos que podíamos acessar o sublinhado, sublinhado proto, sob a escola esbanjadora, a fim de ver seu protótipo, cada objeto e nó tem essa propriedade. Ou uma maré alta. Qual é o seu ponto? Em poucas palavras, o ponto que estou tentando fazer é que um nó é um termo genérico para qualquer tipo de objeto no DOM. E sabemos quando se trata de JavaScript e objeto é um tipo de dados complexo. Então tudo se resume a isso. Podemos salvar em que eles são tipos de objeto país. E vamos olhar para esses dois tipos de objetos. Tenho certeza que você já adivinhou. Temos um tipo de objeto nativo e temos um tipo de objeto host. Bem, em primeiro lugar, vamos olhar para este objeto nativo. Estes são objetos pré-definidos principais que estão sempre disponíveis em JavaScript. E muito importante, esses objetos de assento para fora na especificação de script ECMO, as pessoas apenas chamam isso de falar. Portanto, lembre-se de que um objeto nativo é totalmente definido pela especificação de script em vez do ambiente host ou água IDE. Alguns exemplos de objetos nativos, eles incluem coisas como objeto, função, string, bagunça, booleano, ex cetera, etc. Eles são muitos deles em JavaScript. Mas vamos agora voltar ao nosso exemplo. Só codificamos para obtê-lo. Lembre-se que definimos uma variável chamada cão e atribuímos isso à string WAF. E se usarmos o tipo de operador do JavaScript e passarmos o cão, o que será devolvido para nós? Vimos que, quando existimos, é um protótipo. Era uma corda. E sim, este objeto cão é um objeto nativo. Você poderia argumentar que o cliente, o script ECMO fala não define nossa variável cão e você está certo, mas este cão ainda é um objeto ativo com uma classe interna de string. E essa string é definida pela especificação de script ECMO e um olho de mosca. Algumas pessoas dividem objetos em três categorias amplas. Outro sendo um objeto de usuário. E eles dizem que este cão é um objeto de usuário, mas eu meio que vejo a bagunça de mãos dadas, um objeto de usuário e um objeto nativo de muito, muito próximo. E é por isso que estou dizendo que este objeto cão é um nativo 1.5. Vamos nos livrar disso e passar para o segundo tipo de objeto, e que são objetos host. Em seu núcleo, um objeto host é fornecido por um ambiente específico para servir um propósito específico para seu ambiente que não é definido pela especificação. E muito importante agora ele deve nos pegar, nem todos os ambientes têm os mesmos objetos host. Portanto, se o JavaScript for executado fora do navegador, por exemplo, se ele for executado como uma linguagem de script do lado do servidor em um ambiente como Node.js, diferentes objetos de host estarão disponíveis. Por exemplo, objetos de host em Node.js ou HTTP, HTTPS se S, arrays de URL, et cetera, et cetera. Mas sabemos que quando se trata do navegador, nossos objetos de host são muito diferentes. Temos a janela, temos os documentos, temos o histórico, temos a solicitação XML HTTP, et cetra, et cetra. E qual é outro exemplo de um objeto host? Codifique um pequeno exemplo aqui. Digamos que definimos uma variável P e usamos um dos métodos de eixo no DOM para recuperar esse elemento. Aqui usamos um método chamado getElementsBytagName. E na primeira parte da série, você sabe muito bem que este é um método DOM API e ele retorna para nós uma lista de nós. O ponto que eu estou tentando fazer é que este elemento de parágrafo pode parecer como um objeto JavaScript normal. Mas não foi doado na íntegra. Seu objeto referenciado por nossa variável p é uma lista de nós. E uma lista de nós não é definida de forma alguma na especificação de script. Então sabemos que o que é retornado para nós por este getElementsBytagName é um objeto host. Faz isso meio que fazendo cenas que cubs ou uma mão se recuperando muito. Mas vamos seguir em frente. Vamos nos livrar disso, nos livrar de todo esse barulho. E agora quero que falemos sobre o objeto da janela. O objeto de janela é fornecido a nós pelo navegador, pelo host. E o que é realmente legal sobre este objeto de janela é que ele nos dá acesso a coisas como o DOM, a bomba, e permite que JavaScript seja executado dentro dele. Importante, todos os navegadores da Web suportam o objeto de janela. E este objeto de janela é o nosso objeto raiz. É dado a nós pelo navegador. Ok, então quais são alguns dos objetos hospedeiros dentro do DOM? Já vimos alguns deles neste curso. O mais comum que você viu é este objeto de documento. Este objeto se refere ao conteúdo HTML ou XML exibido na janela do navegador. Mas temos muitos outros objetos fornecidos a nós pelo DOM, como o objeto de evento, o console, o objeto nó, até mesmo o objeto elemento de parágrafo HTML que vimos no exemplo anterior, cetera, et cetera. Há uma tonelada de diversão. Também temos objetos bombardeiros, navegadores, objetos, modelos, não temos? Coisas como quadros do histórico da tela, o navegador, etc., etc. E, finalmente, temos objetos JavaScript nativos. Todos esses objetos verdes, ou o que chamamos de objetos JavaScript nativos, coisas como o objeto e número, data, string, Situ, etc. Ok, antes de terminarmos, você pode estar se perguntando Clyde, qual é a diferença entre o DOM BOM? Em primeiro lugar, quero dizer que podemos argumentar que o host, conhecido como nosso navegador, nos forneceu acesso a todos os DOM e aos objetos de bomba diretamente fora da caixa. E por esta razão estes objectos são referidos como objectos anfitriões. Qual é a diferença real entre o DOM e a bomba? Will, na parte 1 deste curso, você aprendeu que o DOM é um assento padrão e mantido pelo World Wide Web Consortium ou W3C para abreviar. E eles definem como nós navegadores devemos interpretar um documento HTML ou XML. Então você poderia dizer que o DOM é governado por um corpo específico. E a bomba, o modelo do objeto do navegador? A BOM define como os navegadores manipulam a exibição em algumas outras propriedades de um documento em oposição ao seu conteúdo, que é principalmente o que o DOM cobre. Da Zai Maxine. Um ponto muito importante a fazer aqui é que, ao contrário do DOM, a bomba não é um padrão definido por qualquer organização. Então é mais como uma abordagem que usamos como programadores. Ele nos permite aproveitar o fato de que todos os navegadores da web suportam determinados objetos e métodos relacionados. Mas de qualquer maneira, eu só queria deixar isso de lado para que você entenda como eu estou agrupando DOM e bomba em objetos host e por que eu estou agrupando JavaScript em uma categoria separada, tudo por si só referido como objetos nativos. E sabemos que JavaScript é regido obviamente por uma organização que AIG deve especificar script para ser específico. E todos os seus objetos são definidos por essa organização ou por essa especificação. E é por isso que podemos separar nativos versus hospedeiros. Espero que esta palestra tenha feito das cenas um sentimento feliz, muito mais confortável com a alma. Mas não se preocupe, vamos entrar em mais detalhes nas próximas palestras. E agora quero que saltemos para o alto Aki. Eu quero que nos concentremos nesses objetos host porque novamente, este é o que este curso é sobre. Somos sobre o DOM, como manipular o DOM, como tornar suas páginas mais dinâmicas. E, claro, para fazer isso, temos que trabalhar com nós. E nós, como acabamos de mencionar, são os objetos DOM e estes são objetos host. E é por isso que eu quero me concentrar em objetos hospedeiros, portos legais, fazer santos. E vejo-te na próxima palestra. 4. Herança: Agora é hora de olhar para a hierarquia de nós. Compreender a hierarquia do nó nos permitirá entender como nós obter todos os métodos e propriedades. Neste momento, sabemos que o DOM tem um monte de objetos cortam nós dados a nós diretamente fora da caixa. E também sabemos que esses objetos de nó, conhecidos como objetos de host, ou diferentes de JavaScript ou objetos nativos. futuro, eu quero me concentrar agora apenas nos objetos do nó do host. Embora muitos desses conceitos que vamos falar se apliquem igualmente a objetos nativos do JavaScript. Certo, então qual é o ponto de partida? O que precisamos aprender? Bem, o conjunto completo de propriedades e métodos de um nó vem como resultado de algo conhecido como herança. Herança, a passagem do título para uma propriedade após a morte. Não estou falando de herança legal. Estou a falar da herança DOM. Isso significa apenas que alguns objetos de nó por padrão herdarão valores, também conhecidos como propriedades e métodos que são estado em seu objeto pai. Faz cenas econômicas. É tudo o que significa herança. Mas, a fim de entender herança um pouco mais, Vamos olhar para o caminho como método simples vem de. Então agora eu não quero olhar para um objeto de nó. Odeio que queira ser ainda mais simples. Eu quero olhar para um método simples. Sabemos que para criar elementos de movimento modificador ou excesso, sempre temos que começar pela raiz. Temos que acessar o objeto do documento. Por exemplo, para criar um elemento de parágrafo, temos que digitar documento ponto criar elementos, e passamos no limite que queremos criar. Aqui queremos criar um parágrafo. A pergunta que eu tenho para você embora é como este método, este criar, eliminar admitido, vem de você pode estar pensando que vem do objeto documento, certo? Porque acessamos os documentos e existimos um método nele chamado criar elemento. Bem, a resposta pode surpreendê-lo. Vamos pular para o console e tentar encontrar. Isso cria elementos juntos. 5. Encontrando o método de createElement() vem a partir do: Tudo bem, vamos encontrar este método de criação de elemento. Poderíamos ser? Bem, em primeiro lugar, vamos acessar nosso console. E vamos fazer disso uma página em tamanho real. E vamos tentar encontrá-la. Significa Romênia, então você pode ver um pouco melhor. Bem, em primeiro lugar, permitam-me que comece com a solução mais óbvia. Se nós apenas tentar e acessar nosso objeto janela e abrirmos este objeto janela, você pode realmente ver se classificar alfabeticamente, não há nenhum método de elemento criar. Então sabemos que não está no objeto da janela. E isso meio que faz sentido. Nós já sabemos quando acessamos este método cria elemento. Começamos no objeto do documento. Então vamos agora olhar para o objeto de documento. Eu só quero console HDR, o documento da janela. Então, estes são objeto de documento representado em formato JSON como. Só se não tivéssemos que acessar a janela para acessar o documento. Por padrão, todos os objetos globais ou métodos estão disponíveis sem usar a janela de palavra-chave. Então, na verdade, poderíamos ter ido consola o documento. Isso é apenas um pouco como se estivéssemos, se abrirmos este documento e tentarmos procurar o método create element. Você vai notar aqui que não podemos encontrá-lo. Podemos saber que é visto? Uma coisa rápida que podemos fazer é ir Controle um e podemos apenas tentar encontrá-lo na parte inferior, mas digitando criar elemento, e ele não está em nenhum lugar para ser encontrado. Você não pode encontrá-lo. Então isso é bastante interessante. Então agora não está no objeto de janela, que não está no objeto de documento. Bem, onde está? Vamos ter que começar a olhar para a herança. E para fazer isso, podemos olhar para o protótipo de documentos, ou seja, podemos ver como é o pai mais imediato. Então, se você abrir nosso objeto de documento e nós rolamos para a direita para a parte inferior, você verá que temos É protótipo em ser este documento HTML. E se abrirmos esse protótipo, o objeto de documento HTML, novamente, podemos ver que o método create não está aqui. Então vamos rolar para seu protótipo, que HTML determinar protótipo. E aqui temos outro chamado documento, mas desta vez um D. maiúsculo passamos por isso em detalhes na Parte 1 deste curso. Mas de qualquer forma, vamos abrir esse objeto. E a boa notícia é que, se nós rolarmos aqui para baixo, e aqui são os Meus queridos alunos que criam o método do elemento. Então meu ponto sobre herança é este, quando o analisador se depara com nosso método de elemento de criação no objeto de documento, o pequeno d que eu posso adicionar, ele não está lá. O analisador tem que então trabalhar seu caminho até a cadeia de protótipos. E, eventualmente, ele vai encontrar este método de elemento de criação no avô do objeto de documento, este grande objeto de documento D, e é assim que a herança funciona. O objeto de documento herda o método de criação de elemento do objeto de documento D grande. Quem, quem não é? Incrível? Espero que se divirta. Espero que você esteja aprendendo muito nesta série de cursos. A soma dessas coisas é muito avançada. Mal, só estamos a começar. E começamos com um exemplo muito simples. Nós olhamos para o objeto do documento dentro do DOM, e nós seguimos isso até o fim de descobrir de onde um de seus métodos vem, Henry descobriu que ele estava em seu avô. Eu posso provar isso para você, mas indo documento, podemos olhar para o seu tipo proto, que é esse HTML. Lembra-se daquele documento? E podemos olhar para o seu protótipo. E esse deve ser o grande D, o documento. E sabemos que naquele grande D neste objeto de documento, foi de onde veio o método. Então este foi um exemplo muito específico, muito simples. Mas agora eu quero me afastar do objeto de documento no DOM. E eu quero olhar para um objeto de nó específico dentro do DOM. E eu quero seguir essa hierarquia de objetos de nó até a cadeia de protótipos para que possamos entender melhor o DOM. Vai ser muito, muito interessante. Então, eu vou vê-lo na próxima palestra e vamos começar a olhar agora para hierarquias de nó. 6. hierarquia de noções de elementos: Ok, eu continuo te dizendo e olhe para a hierarquia de nós e nós continuamos atrasando isso não mais. Vamos pular para isso agora mesmo. Vamos começar criando um elemento de parágrafo muito simples com um abdominal. Sabemos que isso vai ser um objeto DOM. Espere, espere, espere, espere, espere. Como sabemos que é um objeto DOM? Deixa-me mostrar-te. Tudo bem, então como sabemos que o nosso elemento parágrafo é um objeto DOM vai primeira coisa que eu quero fazer é definir uma variável chamada parágrafo e é criar um. Então documento criar elementos. E queremos criar um elemento de parágrafo, não é? Tudo o que precisamos fazer para determinar seu tipo de objeto como qual modelo. A maneira mais fácil de pensar é que podemos alertá-lo para a tela. E podemos ver aqui que o item devolvido é um objeto. E que tipo de objeto é? É um elemento de parágrafo HTML, objeto. E pescoço, meus queridos alunos é um objeto DOM. Como sabemos que é um objeto DOM? Vai saber que soa meio estranho, mas sabemos que é objeto DOM porque não é um objeto JavaScript. Por exemplo, se definirmos uma nova variável chamada objeto, e usarmos apenas as chaves, há muitas maneiras diferentes de criar um objeto em JavaScript. A propósito, este é apenas um deles. É uma maneira muito rápida de fazer isso. Na verdade, é muito semelhante, se não o mesmo a chamar novo objeto. E nós apenas lançamos nulo como seu protótipo. Isso é tudo o que faz. As chaves estão fazendo. Então lá vamos nós. Temos um objeto. E se alertarmos este objeto, o que vamos ver? Bem, lá vamos nós. Sabemos que é um objeto e sabemos que é do tipo objeto com um grande O. E esse grande objeto O é um objeto JavaScript quem? Então nós apenas mostramos que esse parágrafo que acabamos de criar é um objeto DOM. Está bem, fixe. Então temos o nosso parágrafo, sabemos que é um objeto DOM. Vamos começar a trabalhar nosso caminho até a estrutura hierárquica. Seu protótipo vai ser, neste caso, o elemento de parágrafo HTML. Whoa, whoa, whoa, whoa, whoa. Como sabemos que seu protótipo é o elemento de parágrafo HTML? Mais uma vez, deixe-me saltar rapidamente para o console e mostrar-lhe. Ok, como sabemos que o protótipo deste parágrafo que criamos é o elemento de parágrafo HTML. Tudo o que temos que fazer é acessar nosso objeto parágrafo. E é claro que temos que acessar seu protótipo. E lá vamos nós. É protótipo é este elemento de parágrafo HTML. Ótimo, espero que esteja fazendo sentido. Agora, o elemento de parágrafo HTML também tem um protótipo, e seu protótipo é o objeto elemento HTML. Tenho certeza que você está pegando o jeito disso agora, mas como sabemos que o elemento de parágrafo HTML tem um protótipo de elemento HTML? Enquanto as duas maneiras que podemos descobrir isso, as primeiras e mais fáceis maneiras de abrir este objeto elemento parágrafo HTML. E é claro que podemos ir para o fundo e podemos olhar para o seu próton. E esse próton é o elemento HTML. A segunda maneira que podemos fazer isso se você não quiser abri-lo como poderíamos acessar nossas probabilidades de protótipo, o objeto de parágrafo que criamos. E então podemos olhar para sua propriedade protótipo. E, claro, obtemos o elemento HTML. Espero que isto esteja a fazer sentido. Vamos voltar para a palestra. Acho que está entendendo como ele encontra os protótipos. Por isso não vou continuar a mostrar-te com os protótipos que estão a vir. Podes acreditar na minha palavra, mas encorajo-te a ir e verificar-te. É um exercício que vale a pena. Então vamos continuar este exercício. O elemento HTML também tem um protótipo. Seu protótipo vai ser o objeto elemento. Seu protótipo vai ser o objeto nó. Seu protótipo vai ser o alvo do evento. E agora isso é interessante. Segure para mudar. O protótipo final é o protótipo de objeto. E o que é fascinante é que este protótipo de objeto vem de JavaScript. É o protótipo do objeto JavaScript. E se y no caso de você estar se perguntando, o protótipo do objeto em si é nulo. Então isso significa que este objeto, e o que é super interessante, o que vai explodir sua mente é que isso significa que se você apenas olhar para esta estrutura de alto nível, isso significa que nosso objeto DOM nesta instância também é um Objeto JavaScript. Sei que pode ficar muito confuso e pode parecer assim. E é por isso que os dois estão tão estreitamente entrelaçados, eles estão tão intimamente relacionados. Então, lembre-se no contexto do navegador, objetos DOM também são objetos JavaScript por causa dessa estrutura hierárquica. E, claro, o recíproco não é verdade. Objetos Javascript não são objetos DOM automaticamente. Certo, mas por que temos todos esses tipos diferentes de objetos? O que está acontecendo? Sim, bem, vamos começar pelo topo. Tampas ensinadas neste objeto alvo evento será em primeiro lugar, este destino evento é o objeto raiz e serve como. Base para todos os nós. Em outras palavras, enganar o alvo permite que todos os nós em nosso DOM para utilizar eventos. Como exemplo, ele nos dá acesso ao método addEventListener. Quando começamos a usar esses métodos não são elementos. É daqui que vem. Isso não é interessante? Então lembre-se que o destino do evento é uma interface DOM e é implementado por todos os objetos de nó. Eles podem receber eventos e eles podem ter ouvintes para eles. Sabemos que podemos colocar ouvintes de eventos em elementos, o documento, até mesmo o objeto de janela, os alvos pares mais comuns, mas não pára nesses exemplos simples. Outros objetos também podem ser destinos de evento para, por exemplo, o objeto de solicitação HTTP XML, o objeto de nó de áudio e o objeto de contexto de áudio e uma infinidade de outros. E é para sua informação, porque sabemos que todos esses nós, em última análise, herdam desse objeto. Lembre-se do objeto JavaScript, temos vários outros métodos disponíveis para nós. Métodos de objeto plano como tem própria propriedade. Por exemplo, eu deveria ter mencionado isso antes. Eu só pensei em jogá-lo agora porque eu acabei de pensar nisso. De qualquer forma, vamos seguir em frente. Esse é o alvo do evento. Vamos começar a trabalhar para baixo. Também temos esse objeto de nó, certo? Este objeto nó nos permite atravessar o DOM. Em outras palavras, ele nos dá métodos como nó pai, nós filhos, próximo irmão, et cetera, et cetera. Estes métodos são chamados apenas aquecedores porque nós realmente tentando recuperar algo muitos dos nós que você e eu vamos trabalhar com herdar deste nó, incluindo o nosso elemento parágrafo que acabamos de criar. Isso tem eu continuo mencionando que existem muitas outras classes de nó concreto que herdam disso. Ou seja, que leva nó 4, leva nós eliminados para 11 nós e mais exóticos como os nós de quadrinhos. Mas do que estou falando? Você já sabe disso. Vamos continuar trabalhando nosso caminho de volta para baixo. O que é este elemento? Este elemento é a classe base para todos os elementos DOM. E como o nome sugere, este objeto nos ajuda a atravessar apenas itens de elemento. Assim, por exemplo, ele nos dá acesso a métodos como elementos mistos de link, o método filhos, que como você sabe, só pode ser usado em elementos e no seletor de consulta, et cetera, et cetera. Estou dando alguns exemplos porque eu sei que já trabalhamos com ele anteriormente, mas como eu continuo aludindo, ele não pára apenas com esses métodos e está mencionando, por exemplo, essa cláusula de elemento que serve como base cláusulas mais específicas como o elemento SVG, elementos XML. E, claro, também serve como base para os elementos HTML. Então vamos agora falar sobre este elemento HTML. De forma intuitiva, esta interface está disponível para quaisquer elementos HTML em nossa página. E especifica operações em consultas que podem ser feitas em qualquer elemento HTML. E este elemento HTML é herdado por um elemento HTML mais específico, concreto. No nosso caso, porque criamos um parágrafo, ele foi herdado pelo elemento de parágrafo HTML. E lembre-se de cada tag, um parágrafo ou uma div, uma imagem, uma etiqueta âncora. Cada um tem seu próprio objeto único do qual herda. Por exemplo, a marca âncora não herdará do elemento de parágrafo HTML. Ele irá herdar do elemento âncora HTML. E cada classe de objeto como esta fornece propriedades e métodos específicos para qualquer elemento em que você está trabalhando. Por exemplo, um nó de elemento correspondente a uma tag. E uma tag tem propriedades relacionadas ao link, e uma correspondente a uma tag de entrada tem propriedades relacionadas à entrada e assim por diante e assim por diante. Quem, que vieram incrivelmente longe agora. E espero que estejas a divertir-te e a levar toda esta informação. E levei muito tempo para aprender e tentar juntá-la de uma forma muito simples e intuitiva, divertida. E lembre-se que cada objeto no DOM tem uma estrutura hierárquica semelhante a esta. Não será exatamente o mesmo, dependendo do que estamos trabalhando. Muitos deles vão herdar do mesmo tipo de coisas. Por exemplo, sabemos que temos leva nós também. Não temos apenas nós de elementos com os quais já lidamos ainda. Dewey e toma notas não são os mesmos que nós de elemento, mas eles também são propriedades e métodos comuns entre todos eles. Como todas as classes de dominó ou de uma única hierarquia, eventualmente, esse destino de evento, por exemplo, será aplicado igualmente para tomar neves e nós comuns como ele faz para eliminar. O ponto que estou tentando dizer é que é isso que a hierarquia se trata. E se alguma vez te encontrares num buraco, agora saberás como te desenterrar, porque saberás como encontrar esse método. Você sabe, se, se você espera que um determinado método esteja em um determinado tipo de nó, você pode encontrá-lo em. Espero que agora saibas porquê. Mas de qualquer forma, ainda temos algumas coisas que eu quero vir nesta seção antes de avançarmos em cena. 7. Herança — resumo: Ou estranho, percorremos um longo caminho. Eu só quero dar um passo atrás e resumir o que aprendemos quando se trata de hierarquia de nós. Vimos no conjunto completo de propriedades e métodos de um dado nó vem de herança. E especificamente, nós olhamos para o elemento parágrafo que criamos, que obtém suas propriedades e métodos de. Isso mesmo, o elemento de parágrafo HTML, que obtém suas propriedades e métodos a partir do elemento HTML. Ele obtém suas propriedades e fez a partir de um elemento. Ele obtém suas propriedades e métodos do nó, e ele obtém suas propriedades e métodos do destino do evento. Isso foi um pouco cheio de boca. E também aprendemos que cada tipo específico de objeto protótipo é o para um propósito. Por exemplo, o elemento de parágrafo HTML fornece propriedades específicas de parágrafo. O elemento HTML fornece métodos de elemento HTML comuns, como getters e setters. Sabemos que o objeto elemento fornece método elemento geral. Lembre que olhamos para alguns desses. O nó fornece propriedades gerais do nó DOM e o destino do evento é talvez o mais importante. Esta é a raiz da maioria dos métodos com os quais vamos trabalhar. E isso dá suporte para eventos como o ouvinte de evento add. Lá vamos nós. Eu só queria dar um passo atrás. Então você pode ver em um nível muito alto o que acabamos de cobrir. Mas antes de terminarmos esta seção, quero que discutamos outra coisa. Quero que vejamos como as extinções funcionam. Este não é um tópico muito divulgado, mas é muito, muito interessante. Então vamos falar sobre isso na próxima palestra. 8. Extensões DOM — introdução: Percorremos um longo caminho nesta seção, mas eu só quero mencionar rapidamente a prática da extinção DOM. Em primeiro lugar, o que é? Extinção burra é apenas o processo de adicionar métodos personalizados e propriedades a objetos DOM. Restante, objetos DOM estão assistindo. E os introns não fazem objetos ou hospedam objetos. Especificamente objetos DOM ou objetos Hearst que herdam do documento de evento do elemento ou de qualquer outra interface DOM. Já passamos por este aviso. E todo o conceito de extinções, extinções DOM. Bem, para adicionar essas propriedades e métodos a esses objetos host. E você pode adicionar a esses objetos diretamente ou aos protótipos. Durante dias veremos em breve, você só pode fazer isso em ambientes que têm suporte adequado para os objetos estendidos mais populares ou elementos DOM, como o parágrafo ou as tags div, IE, elementos que herdam do interface do elemento do DOM. Estas são as coisas mais populares que muitos desenvolvedores querem adicionar extinções porque é com o que trabalhamos mais. E por ser tão popular, há muitas bibliotecas e pacotes de terceiros que se expandiram e permitem que essas coisas aconteçam, como protótipos ou ferramentas Moo. Mas de qualquer forma, não me deixe perder de vista esta palestra. Vamos nos livrar disso e vamos agora olhar para um elemento de parágrafo. Você se lembra que nós andamos até a hierarquia deste elemento nó. Como é que isso parece? Bem, isso é hastes são parágrafo começa como um objeto, não um objeto elemento para ser específico. E quando olhamos para o seu protótipo, era este elemento de parágrafo HTML. E obviamente este objeto vai ser específico para o tipo de elemento para o nosso parágrafo. Sim, podemos ver que é o elemento de parágrafo HTML. Para um elemento div, não vai ser isso, vai ser o elemento div HTML. Para o elemento âncora, que vai ser elemento HTML e assim por diante e assim por diante. By the way, por que estes são principais, sentar-se assim? Por que eles são tão estranhos? Bem, você e eu não sentamos esses nomes. Eles são definidos pela especificação HTML DOM e et cetera, mesma especificação, essa mesma rede de especificação também define herança entre diferentes interfaces. Então, de qualquer forma, isso é apenas um pouco de informação. Os elementos de parágrafo HTML, Qual é o seu protótipo? É o elemento HTML. Seu protótipo é o elemento, seu protótipo é o nó. Em seguida, chegamos ao alvo do evento muito importante. E como vimos na palestra anterior, o objeto final é o objeto. E, claro, seu protótipo é nulo. É por isso que com mais detalhes. Certo, Clyde, isso é ótimo. Eu sei de tudo isso, mas por que estamos olhando de novo? Bem, eu quero fazer uma troca de DOM com você. Eu realmente quero saltar para os dados takes para conhecido. Quero que comecemos a codificar algo. Então vamos adicionar uma extinção que está em nosso próprio método personalizado para um desses nós, esses objetos. E deixe-me chupar meu polegar e escolher um aleatório que é apenas olhar para este elemento. E vamos adicionar nosso próprio método personalizado neste objeto host elemento. Vamos fazer isso agora. Isso seria muito divertido. 9. Como adicionar nossa própria extensão DOO: Certo, como funciona essa extinção DOM? E vejamos um exemplo. O que queremos fazer? Bem, vamos apenas dizer que queremos criar uma função chamada read que podemos usar em qualquer elemento que criamos. E só muda essa cor dos elementos. Para ler. Escreve muito simples, muito intuitivo. Então aqui estamos apenas no console do navegador. Eu não estou usando nenhum IDE chique. Acabamos de entrar no console do Chrome. Eu vou expandir isso só para que possamos vê-lo em uma tela cheia. E deixe-me ampliar um pouco. Tudo bem, então o que eu vou fazer é nós vamos acessar esse objeto elemento, certo? E lembre-se, isso é fornecido a nós pelo DOM. Este é um objeto host. E agora o que eu quero fazer é acessar seu protótipo e eu quero definir uma função chamada leitura. O que eu quero fazer, é uma função personalizada e vamos fazer, aguente o Clyde. Por que temos que acessar seu protótipo? Por que não acessamos o objeto e importamos um método personalizado chamado livrar nele? Bem, em primeiro lugar, para saber mais sobre protótipos e a cadeia de protótipos, por favor, confira o meu curso completo de Javascript. A resposta curta é que se nós colocá-lo diretamente no objeto elemento como este, ele não vai ser anexado à sua função construtor. Em outras palavras, ele vai ser específico para esta instância do elemento. Mas em outros objetos que criamos usando a função construtor elemento que não vai estar lá. E é por isso que quero anexá-lo ao seu protótipo. Lembre-se, o protótipo está disponível para nós a partir de JavaScript. E isso significa apenas que outros objetos que são criados a partir dele também mostrarão suas propriedades de protótipo. Diga que faz sentido. Espero que sim. Então aqui vamos nós, estamos acessando como protótipo. Lá, definimos uma função chamada read e vamos atribuir isso. Como eu disse, vai ser uma função. Então, usando a palavra-chave de função do JavaScript. E nesta função, o que queremos que aconteça? Será que queremos acessar o objeto que chamou esse método? Então, usamos o, esta palavra-chave. Mais uma vez, se você não entende o que é isso, por favor, confira o nosso curso completo de JavaScript Grandmaster. Então agora temos o objeto que chamou esse método dentro quer acessar sua propriedade style e queremos alterar sua cor. Lembra-se disso? E queremos mudar a cor para vermelho. Então lá vamos nós. É o nosso protótipo vermelho. Ok, nós anexamos agora a este objeto elemento. Então a próxima coisa que quero fazer é criar um parágrafo. Então já sabemos como fazer isso. Vamos criar uma variável chamada p. Ela começou a raiz da nossa página, e vamos acessar um método chamado criar elementos. E o elemento que queremos criar aqui é p. Agora o que eu quero fazer, eu não atribui um sinal de igual. Lá vamos nós. Então agora criamos nosso parágrafo. O que eu quero fazer agora é me deixar realmente anexar a página novamente. Para ver isto em acção, quero colocar o nosso parágrafo neste documento. Como podemos fazer isso? Bem, em primeiro lugar, vamos acessar nosso documento e é apenas substituir tudo que você vê na tela pela palavra oi. Então lá vamos nós. Temos a palavra “oi”. Agora o que eu quero fazer é adicionar conteúdo a um parágrafo. Neste momento, só vai ser uma etiqueta vazia. Então eu quero acessar nosso objeto p.sit e me pergunto, em seguida, inserir algum conteúdo de texto. E vamos apenas dizer que este é um novo elemento de parágrafo. Bastante simples. Até agora, tudo bem. E como vocês se lembram da primeira série deste curso, criamos este parágrafo, mas não nos apegamos a nada. Só está flutuando no espaço neste momento. Então agora o que eu quero fazer é adicionar isso ao DOM. Então tudo o que fazemos aqui é acessar o corpo do documento e usamos um alfinete que a criança fixou no corpo. E eu estou querendo fixar este parágrafo. Estamos quase terminando, eu prometo. A última coisa que queremos fazer é aceder a esta função vermelha. E vocês notarão neste objeto P, nós nunca definimos uma função de leitura nele pesadamente. Então você acha que vai funcionar? Nós acessamos nosso P e tentamos executar esta função chamada read. Você pensa isso longe? Água? Agora, vamos retornar. E olha como é incrível. E isso, meus queridos alunos, é a extinção DOM. Nós adicionamos nosso próprio método personalizado para este objeto elemento. Cara, então você pode estar pensando agora, isso é incrível e eu vou fazer isso o tempo todo. Mas por razões que vou discutir agora, esta não é uma boa prática, pode ficar muito confusa por razões que vou discutir. Então, sem mais delongas, vamos pular para a próxima palestra e olhar para este código com um pouco mais de detalhes. 10. Extensões DOM boas ou ruim?: Acabamos de fazer um exemplo de extinção DOM juntos, ip, nos divertindo. Espero que esteja aprendendo um tempo, mas quero falar sobre nosso código com mais detalhes. Então deixe-me trazê-lo de volta para a tela. Isto é o que acabamos de fazer. Lembre-se. Primeiro atribuímos a função de leitura ao protótipo do elemento. Em seguida, criamos nossos elementos de parágrafo e nome. Poderíamos invocar a função diretamente nela. Bem, por que esse código funciona? A razão que funciona é porque o objeto referido pelo elemento ponto protótipo, na verdade, um dos objetos na cadeia protótipo deste elemento parágrafo que criamos. Em outras palavras, quando esta função vermelha é executada no elemento de parágrafo, o passado não vai encontrá-lo diretamente no parágrafo. A função vai ser pesquisada em toda a cadeia de protótipos até que seja encontrado neste objeto de protótipo elemento ponto. Em segundo lugar, para fazer cenas, como eu aludi na palestra anterior, eles são problemas com a abordagem de extinção DOM. Bem, quais são alguns desses problemas? Primeiro, vamos nos livrar de todo o barulho. Tenho a certeza que concordarias comigo. Temos que ter cuidado com a forma como anexamos a função de leitura. Por exemplo, se criarmos uma propriedade, Digamos apenas que colocamos essa propriedade de leitura ou uma função no protótipo do elemento de parágrafo HTML, não o objeto elemento. Lembre-se que fizemos isso no nosso exemplo. Digamos que fizemos isso no elemento de parágrafo HTML. Nesse caso, não seríamos capazes de usar esta propriedade em digamos, um elemento âncora. Deixa-me mostrar-te o que quero dizer. Deixe-me chamar um código aqui. E isto é o que tínhamos, certo? Colocamos nossa propriedade de leitura neste protótipo no objeto elemento. Como mencionei, o que acontece se formos e fizermos algo semelhante, mas agora colocamos essa propriedade no elemento parágrafo HTML. Não fazemos isso diretamente no elemento agora. E, em vez de criar um parágrafo, vamos criar uma tag âncora. E tentamos executar esta função, a propriedade na tag âncora. O que vai acontecer? Como inseguro, você adivinhou matriz, vamos ser jogado um erro. Especificamente, vamos ser informados que o vermelho não é uma função definida nessa tag âncora. Isso faz sentido? E pense sobre por que isso acontece. Lembre-se, isso ocorre porque a cadeia de protótipos de elementos âncora nunca inclui um objeto referido pelo protótipo ponto do elemento de parágrafo HTML. Em vez disso, ele vai incluir um objeto que é referido pelo elemento âncora HTML dot prototype. E é por isso que, no exemplo anterior, nós realmente anexamos nosso método mais acima da cadeia de protótipos nesse objeto elemento. Então por que não incluir todas as nossas extinções nesse objeto elemento? Bem, criar uma propriedade no elemento do protótipo tem problemas semelhantes. Por exemplo, ele não estará disponível em todos os tipos de nó, mas apenas aqueles do elemento de tipo. Por exemplo, e se criarmos um nó de texto ou um nó de comentário, et cetera, et cetera. Certo, Clyde vai continuar trabalhando na cadeia de protótipos em vez de anexar nossa nova troca DOM admitida ao objeto elemento. Por que fizemos isso com o objeto nó? E sim, essa é uma pergunta muito válida. Por que não adicionamos a nota mais alta? Na verdade, por que não adicionamos todas as nossas extinções nesse objeto? Lembre-se do O maiúsculo, o objeto, os objetos. Por que não fazemos isso? Bem, é sobre isso que eu quero falar na próxima palestra. Existem outros problemas usando esta extinção DOM. Mantenha-se motivado, tome um café e te vejo na próxima palestra. 11. Os problemas com extensões DOO: Ser capaz de estender elementos DOM através de objetos protótipos soa incrível. Estamos tirando vantagem da natureza prototipica do JavaScript. E o script DOM torna-se muito orientado a objetos e é tão tentador que, mesmo alguns anos atrás, biblioteca JavaScript protótipo fez isso em uma parte central de sua arquitetura. Mas segurem seus cavalos. Eles são um monte de problemas com a implementação de extinções dominantes como forma. E vou discutir por que não é a melhor ideia. Bem, você pode ver alguns dos problemas na tela é apenas começar com o primeiro. E nós meio que já olhamos para isso. O primeiro problema é que temos que escolher o protótipo certo. Se anexarmos uma propriedade ao protótipo de um elemento DOM, ela só pode ser acessada por um objeto que tenha o mesmo protótipo como parte de sua cadeia, nós nos vendemos direitos. Se adicionarmos essa propriedade de leitura ao elemento, o nerd de quadrinhos não terá acesso à propriedade de ataque que pega o hardware e tem acesso à propriedade de estupro, et cetra, et cetera. Então esse é o primeiro problema com essa abordagem. Em segundo lugar, as regras não. Lembre-se, objetos DOM ou objetos host tem C, Eu tenho um erro ortográfico. Eles não são objetos opostos sobre o tema de não haver regras. Eu só quero dizer que um grande problema com o uso de todas essas abordagens para adicionar emissores de propriedades é que a exposição desses protótipos de objetos DOM não é garantida. Por que não é garantido? Bem, como a especificação DOM não torna obrigatório para os fornecedores, ok, navegadores ter uma propriedade de elemento global que se tornará um protótipo de todos os objetos que o implementam. Isso não é especificado como não obrigatório, e nem ele afirma que deve existir uma propriedade de nó global que é um protótipo de todos os objetos que implementam esta interface é você poderia argumentar que, embora eles não o tornam obrigatório, maioria dos navegadores faz em voz alta. E é meio que verdade. Mas quando começamos a olhar para o Internet Explorer sete ou Safari dois exemplos, não podemos fazer esse tipo de coisas que vimos. E você poderia argumentar, cliente, sim, mas certamente podemos contornar todo esse objeto de extensão apenas estendendo um objeto diretamente. Por exemplo, se formos e fazer um elemento de parágrafo, lembre-se, P é igual a documento ou criar elemento. Não podemos adicionar uma propriedade ao parágrafo deles? Bem, nós podemos, mas desempenho sábio, não é uma boa idéia. É muito lento. Mas de qualquer maneira, eu quero voltar para esses objetos host. Quais são os problemas aqui? Vamos DOM objetos ou objetos de host e hosts objetos são os mais difíceis de trabalhar. Objetos Hearst autorizados a fazer coisas que nenhum outro objeto pode sequer sonhar em fazer. Então poderíamos dizer que estender objetos DOM é como andar em um campo minado. Por definição, estamos trabalhando com algo que é permitido se comportar de forma imprevisível e completamente errática. Isso é rapidamente olhar para um exemplo. Se escrevermos documento cria elemento p e existimos o método pai offset. Isso não funcionará no Internet Explorer. Vamos receber um erro. Isso é apenas um exemplo de Watson, uma boa idéia e as regras sem especificar como eles devem se comportar. A última coisa que quero discutir são colisões. Você tem que pensar o que estamos fazendo aqui sempre que começamos a adicionar nossas próprias extensões a objetos, temos que chegar a um nome de propriedade e nossa instância onde nosso exemplo chamamos de vermelho. Mas o medo já faz parte do DOM. Podemos mais escritores não tem outros efeitos knock-on com outras partes do código dominante. Lembre-se, HTML5 traz novos métodos e propriedades o tempo todo. Quem disse que ele o tem? Esses são alguns dos maiores problemas que consigo pensar. E só para resumir, minha opinião sobre todo este assunto é geralmente extinções DOM em não uma grande idéia. E isso é verdade mesmo que você só queira que seu site funcione em dois navegadores, você ainda terá riscos de colisão, aqueles que acabamos de discutir. Então qual é a solução? Será que uma solução é usar corredeiras de objetos. E isso é praticamente o que jQuery tem feito desde o início. Mas de qualquer maneira, este é um tópico que está totalmente além do escopo do que estou tentando passar por aqui. Espero que tenha aprendido muito sobre extinções DOM. Espero que entenda por que não é necessariamente a melhor ideia. Mas de qualquer forma, fique motivado e te vejo na próxima palestra. 12. Os eventos não são um distúrbio isolado: Muito bem, vamos começar a falar sobre borbulhar eventos. E por vaidoso balbuciar, quero dizer o fluxo de cada evento através do DOM. Até este ponto do curso, vimos muitas maneiras de adicionar escuta ao DOM. A melhor maneira é usar este método add evento ouvinte. E todos nós sabemos como isso funciona. Mas o que ainda não discutimos é um tópico bastante avançado de como os eventos são demitidos. A coisa mais importante a tirar desta seção é que qualquer veia não é um distúrbio isolado, assim como uma borboleta batendo suas asas, então conhecida como terremoto, um ataque de meteoro ou até mesmo uma visita de Hulk. Ele acha que efeito ondulação, um monte de elementos que estão em um caminho. Se y i, antes de seguirmos em frente, a borboleta falsificada é apenas a idéia de que pequenas coisas podem ter impactos não-lineares em um sistema mais complexo. Quando dizemos que a borboleta é falsa, imaginamos uma borboleta batendo as asas e causando um grande tufão. Isso, vamos seguir em frente. Eu não quero divagar. Bem, quero que codifiquemos algo muito, muito simples. Eu quero ter um documento HTML muito simples. Quero ter um elemento corporal. E dentro do corpo, vamos ter estrangeiros, três divs aninhados. E podemos dar ao primeiro div uma ideia de um, o secante da ideia de dois. E no terceiro elemento aninhado, vamos ter duas divs. Vamos dar à primeira div um ID de três a, e a segunda div um ID de três B. E dentro de cada uma dessas divs, leads incluem um botão. O primeiro botão podemos dar uma idéia de Botão 1 eo segundo botão podemos dar um ID de botão também. Como podemos ver, não há nada realmente excitante acontecendo com nosso código. E o HTML deve parecer bastante simples. E agora, você deve ser capaz de mapear isso na árvore DOM. Lembre-se que começamos com um objeto de janela, esse é o rei. Dentro disso temos o nosso objeto de documento, então temos o objeto HTML, e então podemos começar a mapear tudo para fora. Temos o nosso corpo e depois temos aqueles divs debaixo do corpo. Temos um div com a identificação de um, certo? Dentro disso, temos outro div com identificação de dois. Dentro disso, temos dois divs com os IDs de 33 b. E, claro, dentro de cada um desses termos, temos um padrão com os IDs correspondentes Qu. Então, aqui vamos nós. Esta é a base com a qual quero que trabalhemos, como Pausar o vídeo agora antes de seguir em frente, deixe-nos afundar e eles verão o que acontece quando clicamos em um desses botões. 13. Evento borbulhando de eventos vs captura: Certo, vamos ver o que acontece quando você clica em um botão. Lembre-se que nós temos nosso HTML e nós o encontramos em uma árvore DOM. E este é o caminho na investigação vai começar nesta árvore DOM. E vamos nos livrar desse funil HTML só para remover o ruído. E vamos clicar no botão 1. O que vai acontecer? Bem, pelo que aprendemos no curso já, sabemos que um Nikki veias vai ser encontrado. A coisa interessante que ainda não discutimos é que exatamente o evento clique está sendo disparado do nosso evento clique, assim como quase todos os outros eventos não se originam no elemento com o qual interagimos. Isso seria muito fácil e faria cenas demais. Então, no nosso caso, esse evento clique não se origina na parte inferior com ID do Botão 1. Em vez disso, todas as veias se originam no rolo de bateria. A página, que é o objeto de janela. Então vamos mapear isso. Sabemos que o nosso evento começa aqui no objeto da janela. Eu sei que é meio estranho, certo, clicar no botão, mas o evento na verdade não começa com o botão. Ele começa no objeto de janela. A partir desta raiz Window Object, deixar tinta faz o seu caminho através da parte estreita do DOM. E isso o impede, o elemento que desencadeou o evento. No nosso caso, ele pára neste botão com um ID de Botão 1. E é mais conhecido como togas, o alvo do evento, se preferir. Então lembre-se que o elemento mais profundamente aninhado que chama o evento real, neste caso, esse botão é chamado de elemento alvo. E este elemento alvo não muda durante todo este processo de borbulhamento. Como acabamos de ver neste diagrama aqui, o caminho que olivina toma é bastante giratório, começa na raiz e vai todo o caminho até o alvo do evento. Mas ao longo do caminho, ele meio irritantemente notifica todos os elementos ao longo do caminho. Então, isso significa que se um é um manipulador de eventos associado com o elemento no caminho que corresponde ao mesmo passando atualmente por esse manipulador de eventos também será chamado não pára. Uma vez que o evento atinge o alvo, isso não pára. É como um daqueles coelhinhos intergênicos onde ele colocou baterias no tubo da veia, continua indo refazendo passos e voltando para a raiz. E como antes, no seu caminho, cada elemento é notificado deste evento. Portanto, isso significa que todos os manipuladores de eventos presentes também ficarão frios, desde que seja o mesmo evento. Em nosso caso, o evento clique. Isto está a fazer sentido. Eu sei que parece um pouco estranho no começo. Uma das principais coisas a notar, porém, é que ele não encontrou um caminho. E Aldon, iniciamos um evento. O evento sempre começará na raiz. Descerá pela estrutura DOM até atingir o alvo do evento. E então ele vai viajar de volta para a raiz. E toda esta jornada é muito formalmente definir o que eu quero dizer com isso. Bem, vamos nos livrar de todo o barulho. E vamos dar uma olhada nisso. Quando ele viaja para baixo. Isso é referido como a fase de captura de eventos. E quando ele viaja para cima, e como você provavelmente teria adivinhado, isso é chamado de fase borbulhante do evento. Quanto mais simples entre nós, incluindo eu mesmo, basta chamá-lo de fase 1 e fase 2. É apenas mais fácil. Portanto, esteja ciente de que você pode ver o nome apropriado chamado captura de evento, e você pode ver o termo fase 1. Ambos podem ser usados de forma intercambiável. Certo, acho que consegui muita informação sobre você nesta palestra. Eu quero parar aqui, mas ainda temos muito para cobrir. Na próxima palestra, vamos começar a aprofundar mais nisso. Espero que estejas a divertir-te, mantém-te motivado, e vejo-te na próxima palestra. 14. Como ouvir durante a fase de captura: Tudo bem, para lembrá-lo, estamos falando de borbulhar eventos. E lembre-se, mesmo balbuciar é apenas o fluxo de cada evento através do DOM. E acabamos de ver na palestra anterior que podemos dividir todo esse processo em duas fases. Fase 1, também conhecida como a fase de captura, é nós, o evento começa na raiz e ele funciona seu caminho através do DOM todo o caminho até o destino do evento. Essa é a fase um. Nós também olhamos para a fase 2, conhecida como a fase borbulhante. E bastante intuitivo, sim, eu acho que é assim que o evento bolhas todo o caminho de volta até a raiz. Vimos que todos os elementos em qualquer pausar palhetas, são muito sortudos. Enquanto eles sorte bem, porque eles têm a sorte de ser notificado duas vezes quando cada vez e se reunir para o demitido. Este tipo de talvez um consertou o kobe, certo, não é? Porque cada vez que ouvimos eventos, temos que escolher em que rosto queremos ouvir para o nosso evento. Em. Nós ouvimos o nosso evento é que ele está desmoronando na fase de captura. O que ouvimos nossos eventos como uma subida de volta na fase borbulhante? que fase realmente ouvir um evento? Bem, meus queridos alunos, este é nós, temos outro argumento para a nossa função adicionar ouvinte de eventos. Lembre-se da sintaxe. Nós adicionamos este ouvinte estimativa em um elemento. Digamos que temos que clicar em eventos. E então temos um manipulador chamado handler clique, que ainda não discutimos, é que há realmente um terceiro argumento para esta função. E este terceiro argumento especifica se queremos ouvir este evento durante a fase de captura. Em outras palavras, um argumento de verdade significa que queremos ouvir o bebê durante a fase de captura. Isso meio que faz sentido? E se não tivermos verdadeiro, obviamente o final padrão é falso. E quando usamos ouvintes de evento in-line ou se nós apenas especificado para seus argumentos para o ouvinte de evento add. O navegador não sabe nada sobre captura e você codifica seus manipuladores de eventos são necessários para executar na segunda fase, na fase de bolhas. Se sim, eles vão formalmente três fases. E, em seguida, a terceira fase é a fase alvo que precisamos veia atingiu o elemento real. Mas, na prática, isso não é tratado separadamente. Na verdade, os manipuladores nas fases de captura e balbuciação também são acionados nessa fase alvo. Mas de qualquer maneira, e eu salvei, você provavelmente está se perguntando como tudo isso funciona. Então ele sempre, vamos saltar para o editor de texto e vamos começar a codificar. 15. Bubble vs captura — exemplo 1: Tudo bem, você me conhece, eu adoro exemplos. Então vamos começar rachando. Tudo o que eu quero fazer é criar uma página HTML muito simples. Quero incluir dois botões. Então vamos fazer uma tag de botão com ID de Botão 1. E podemos chamar esse botão um. E podemos apenas duplicar isso. E claro que isso pode ser botão também. Isso é basicamente o que eu quero fazer. Direitos muito simples, e eu quero incluir JavaScript. Vamos começar a acessar o DOM. Vamos apenas colocar em um servidor ao vivo aqui para que possamos ver isso no navegador enquanto estamos trabalhando. Deixa-me arrastar isto. Isso faz sentido? Aqui temos um botão um e um botão dois. Vamos voltar ao nosso editor de texto e vamos terminar este JavaScript. O que eu quero fazer é acessar o Botão 1 e honestamente anexar um ouvinte de eventos a ele. E depois quero ver o que acontece. Então, mas primeiro, já sabemos como fazer isso. Nós acessamos nossos objetos de documento, um método chamado get element by ID. O ID é claro é Botão 1. Ok, ótimo, mas o que eu quero fazer agora, bem, vamos ouvir o evento durante a fase de captura e também ouvir o evento e a fase borbulhante. Primeiro, vamos fazer a fase de captura. Então vamos executar nosso manipulador na fase de captura. Como é que fazemos isso? Bem, acabamos de ver que acessamos nosso botão. Em seguida, implementamos o método add event listener. Queremos ouvir um evento de clique. Em seguida, queremos definir uma função chamada manipulador clique. Não definimos uma escritura, vamos acabar. O terceiro argumento que temos que fornecer é verdadeiro, porque agora queremos que eles ouçam e executem nosso manipulador na fase de captura. Realista, exatamente a mesma coisa agora. Mas agora vamos executar como manipulador na fase de bolhas, e este é o padrão. Mais uma vez, podemos acessar nosso botão um. Nós adicionamos o ouvinte de eventos. Queremos ouvir um evento de clique. Queremos executar o manipulador de cliques. Mas agora queremos colocar falso. E não temos que fazer isso. Podemos colocar em dois argumentos. Mas eu queria ser explícito aqui porque eu quero que você saiba o que está acontecendo nos bastidores. Este é o comportamento padrão. A última coisa que temos a fazer, é claro, é definir o nosso encarregado. Nós o chamamos de manipulador de cliques. E vamos apenas fazer algo muito simples é apenas o registro do console. Ou eu fui cortado. Cenas econômicas muito simples. Então vamos salvar, vamos para o nosso navegador e vamos abrir um console. O que vai acontecer quando clicarmos no botão um? O que esperavas ver? Bem, antes de eu te mostrar a solução, vamos voltar ao nosso editor de código aqui. O que vai acontecer quando esse evento de clique é disparado no botão de rede um. Lembra-se do que acontece? Ele vai começar na raiz do nosso documento não está no objeto da janela e ele vai viajar todo o caminho até aquele botão uma mão que net evento aperta botão um. Nós dissemos, Sim, queremos executar o manipulador de cliques porque nós especificamos verdadeiro. Mas lembre-se que não pára. Lá, não nos afasta depois de chegar ao fundo. Aquele mesmo alvo que, em seguida, tem que viajar todo o caminho de volta até o objeto janela. E é assim que nosso segundo ouvinte de eventos será acionado porque ele também está ouvindo um evento de clique que já foi disparado. Mas desta vez ele vai ouvir e executar o manipulador. Durante a fase borbulhante. log esperado do console semeado acontecesse duas vezes. Um durante a fase de captura e dois durante a fase de borbulhamento. Bem, vamos ver se OnCreate. Então, vamos clicar no botão um. Sim, e hábito, Eu tenho sido clicado, foi console registrado duas vezes para a tela. É por isso que o número 2, Zai Bu Gou. Espero que isto esteja a fazer sentido. Vamos nos manter motivados porque eles ainda mais temos que aprender. 16. Bubble vs captura — exemplo 2: Tudo bem, você me conhece agora o quanto eu amo exemplos e este vai ser muito divertido porque o que eu quero fazer alguns querendo mostrar para nós todo o processo de captura e balbuciação. Vai ser muito legal e nós vamos estar usando o for of loop para fazê-lo. Então, o que estamos esperando? Vamos começar rachando. O que eu quero fazer é criar uma página HTML simples. Agora eu só quero incluir estilos apenas para torná-lo um pouco mais robusto. E quero estilizar todo o nosso corpo. Eu estou me perguntando todos os nossos elementos para ter uma margem de 10 pixels. E eu quero colocar uma borda em torno de cada elemento. Nós criamos isso, basta dar-lhe uma largura de um pixel. Digamos que é uma borda sólida e lista cor de vermelho. Tão simples, nada muito extravagante acontecendo lá. Vamos agora criar nosso elemento corporal. Dentro do nosso corpo, eu quero criar três elementos aninhados. Primeiro, vamos criar uma div. Então vamos criar um formulário. Vamos nos livrar da ação aqui. Não precisamos de ação. Então a última coisa que quero fazer é criar um elemento de parágrafo. Então lá vamos nós. Bastante simples, certo? E se olharmos para isto no navegador, é assim que vai parecer. Vamos começar o nosso servidor ao vivo. Então lá vamos nós. Temos nossa div, temos um formulário e um parágrafo elementos. Obviamente, se clicarmos nisso, nada vai acontecer porque não adicionamos nenhum ouvinte de eventos. Então vamos fazer isso agora. Vai ser bem simples. Em primeiro lugar, vamos adicionar nosso JavaScript aqui. E lembre-se do que eu disse. Eu quero usar o loop for of. Não quero adicionar manualmente um ouvinte de eventos. E isso está ficando bastante avançado agora, mas você verá como é simples assim que pegar o jeito dele. Então o for of loop é uma função muito simples. Basta ter em mente se você não tem certeza do que é, você sempre pode verificar o meu curso de Javascript competir grandmaster para obter uma sensação mais intuitiva é ajudar JavaScript em si funciona. Mas como você verá, é quase, quase tão básico quanto ler a função. Então o que estamos querendo fazer é correr para percorrer todos os nossos elementos em nossa página e colocá-los em uma variável. Vamos definir nossa variável como elemento DOM. E então os objetos que queremos percorrer são o quê? Bem, essa vai ser a nossa pergunta. Selecione-os. Claro, as outras maneiras que podemos fazê-lo, mas estou feliz em usar o nosso seletor de consulta todos. Então, o que queremos fazer é quando Integrar todos os elementos em nosso DOM. É literalmente simples assim. Então basta lembrar o que estamos fazendo quando encontramos todos os elementos em nosso DOM através do seletor de consulta, todos uma coleção de retorno para nós. E nós apenas loop através dessa coleção e cada item nessa coleção é colocado em uma variável aqui chamado elemento DOM. E agora queremos adicionar ouvintes de eventos a todos esses, não se preocupe. E queremos fazer isso tanto para a fase de captura quanto para a fase de borbulhamento. Então vamos primeiro lidar com a fase de captura. Vamos acessar nosso elemento que nos foi devolvido. Nesse item, vamos adicionar qualquer ouvinte de evento, um ouvinte de evento de clique. E sim, agora nós poderíamos realmente definir uma função de manipulador, mas eu só quero executá-la em linha. Então eu vou usar o ano da sintaxe da seta. E o que vamos fazer? Vamos alertar algo para a tela. Vamos usar literais de modelo. Novamente, se você não sabe o que tudo isso é, por favor, confira o curso completo de grande mestre do meu JavaScript. Se você sabe o que é, ótimo, você pode acompanhar. Como eu mencionei, isso vai ser para a fase de captura. E agora eu quero usar o dólar e sintaxe de chave para colocar em uma variável. Aqui vamos usar o nosso elemento DOM. E quero saber o nome da etiqueta. Por exemplo, o HTML, a pomba, o formulário, o p, qualquer que seja o nome da tag. E para especificar que queremos que isso ouça na fase de captura, o que temos que fazer? Isso mesmo, Temos que fornecer um terceiro argumento para o método de ouvinte de evento add. E o terceiro argumento precisa ser verdadeiro. Agora, a última coisa que queremos fazer é fazer exatamente a mesma coisa. Mas na fase de borbulhamento, acessar nosso elemento, adicionamos o método addEventListener. Novamente, vai ser um evento de clique e podemos usar a sintaxe de seta. Mais uma vez. Eu só quero que você saiba que nós realmente não temos que colocá-lo dentro de colchetes como fizemos acima. Nós podemos realmente apenas executar nossa função de alerta diretamente digitando alerta. Ok, eu só quero te mostrar maneiras diferentes de fazer as coisas. Sim, vai ser durante a fase borbulhante. E eu quero fazer exatamente a mesma coisa. Quero exibir seu nome de tag. Então, aqui vamos nós. Isso é tipo de fazer coisas? É intuitivo? Espero que sim. Vamos para o nosso navegador e vamos pensar sobre o que aconteceria quando vamos e clique neste elemento parágrafo. O que você acha que vai acontecer? Vamos dar um passo atrás. Fazemos todos os eventos se originam dele, origina-se do objeto janela da raiz do nosso documento, Sul da Espanha, durante a fase de captura, para que muitos alertas sejam mostrados, certo? Na verdade fora esperado para começar a partir da tag HTML em si. E vai borbulhar até o corpo em que vai acertar a pomba na forma. E finalmente, um elemento de parágrafo e rede vai formar a fase de captura, também conhecida como fase um. Não pára aí, pois não? Porque o que acontece a seguir? Isso é certo. Vai borbulhar todo o caminho de volta para o elemento raiz. Espero que esteja fazendo sentido. Então, vamos clicar neste parágrafo e ver o que acontece. Bem, lá vamos nós. Sabemos que estamos na fase de captura. E é HTML. Isso é exatamente o que esperávamos quando tomamos um k são esperados para ser o corpo e isso é o que temos. Que incrível. O próximo item que vai capturar, claro, é o elemento div. Então ele vai fazer o elemento de forma. E, finalmente, o elemento parágrafo. Como mencionei, não pára aqui, pois não? Porque o que vai acontecer agora quando clicarmos em OK, bem, isso mesmo. Vai começar a fase borbulhante. E a fase borbulhante começa no destino do evento, neste caso o p. E ele vai trabalhar seu caminho todo de volta para o objeto raiz da janela. Então eu esperaria que o próximo alerta fosse o formulário. Isso é certo. O próximo seria o div. O próximo será o corpo. O próximo será o HTML. E então terminamos. Cara, essa coisa realmente é incrível e é muito, muito avançada. Agora você entende todo o processo que a tenda mais eu quero falar e eu vou vê-lo na próxima palestra. 17. Por que capturar assuntos em frente ao borbulhado: Ou estranho, estamos indo ao longo do caminho. Você entende as diferentes fases, a fase de captura e a fase de borbulhamento. Mas neste momento você provavelmente está se perguntando, por que tudo isso importa? Quem se importa? E esta é uma pergunta muito válida, especialmente se ele estava trabalhando com as veias há muito tempo e você realmente não se deparou com isso antes. E esta é a primeira vez que você ouve falar sobre essas diferentes fases. E eu vou ser honesto, principalmente isso não importa. Em outras palavras, nossa escolha de ouvir um evento durante a fase de captura ou borbulhar é praticamente irrelevante para o que você e eu vamos fazer 99% do tempo. Mas quando ele é sempre o morcego. Com isso dito, eles vão chegar um momento em sua vida onde você vai precisar distinguir entre capturar e borbulhar, especialmente quando você está fazendo um pouco de suas fontes, coisas em seu site, o que eu quero dizer, você vai mais provavelmente terá que distinguir entre os dois quando você está lidando com menus aninhados que revelam submenus quando você passa o mouse sobre eles. Você também pode precisar desse conhecimento que precisamos lidar com uma biblioteca de terceiros. Com essa biblioteca tem sua própria lógica de eventos que você deseja contornar para seu próprio comportamento personalizado. E outro cenário em que se tornará importante distinguir entre balbuciar e capturar é quando você deseja substituir algum navegador padrão embutido. Aqui. Bem, o que é um exemplo vai, quando você clicar na barra de rolagem ou ficar focado em TextField, et cetera, et cetera. Quando você quer começar a substituir todas essas coisas, você pode querer ouvir você apenas veias em uma determinada fase. Então, aí está. Eu só queria fornecer esta revelação. Legal, tudo bem, mas agora sabemos sobre balbuciar, sabemos sobre captura. Mas e se não quisermos que isso aconteça? E quando clicamos em um elemento de parágrafo? Só queremos que o manipulador atire. Não queremos que todo o processo de borbulhar aconteça. O que vamos fazer? Bem, segure seus cavalos. Na próxima palestra. 18. Como parar de capturar eventos e borbulhar: A última coisa que quero falar antes de tomar outro café é como evitar que nosso evento se propague, balbucie, continue. Às vezes, não queremos que o nosso evento volte ao topo. Em outras palavras, queremos matar o nosso evento, ou seja , impedi-lo de atingir a raiz e acabar com a sua vida, temos o método de propagação stop, que impede que o nosso evento corra através do nosso DOM. Está bem, parece bastante simples. Então, como funciona? Chame nossa estrutura DOM aqui. Lembra-se desta? E lembre-se que inserimos um ouvinte de cliques na parte inferior. método de E o que você acha que aconteceria se colocássemos o propagação stop na div com ID de três a, o que aconteceria? Então vamos dizer que o usuário vem junto com qualquer botão de cliques um. A primeira coisa que acontece é que os eventos apontam na raiz da nossa página, que é o objeto janela. Um dinamarquês começa a viajar pela árvore DOM, parando ao longo de cada elemento. Ao longo do caminho sabemos disso, ele vai ficar indo para atingir este div com três como sua identificação. E o que vai acontecer? Bem, as veias vão ser paradas neste momento. Por quê? Bem, porque nós realmente tínhamos parado a propagação ser chamada neste manipulador. Isso faz sentido? Não se preocupe se isso não acontecer, eu quero pular para o console agora e eu quero codificar isso com você para que você possa vê-lo em ação. Veja agora. 19. Um exemplo de usar a stopPropagation: Ou lembro-me que tivemos este código algumas palestras atrás. Só temos um botão um e um botão dois. E inserimos um ouvinte de eventos, especificamente um ouvinte de evento de clique em cada um desses botões. Na verdade, quer saber, nós nem precisamos de botão para, deixe-me apenas me livrar do botão para isso só vai nos confundir. Então nós temos apenas Botão 1 e nós adicionamos esses ouvintes de eventos na parte inferior um. Mas lembre-se que queríamos que o evento do manipulador de cliques fosse acionado durante a fase de captura e durante a fase de borbulhamento. E então tivemos dois consoles. Lembra-se disso? Agora quero misturar as coisas, certo? Eu quero realmente adicionar algo em, você sabe o que fazer, nós temos apenas um botão que eu realmente quero criar. Vamos criar uma div com um ID de três. E, em seguida, dentro desta div, eu quero inserir este botão. Isso faz sentido? Então eles podem ir, mas agora eu quero misturar as coisas como um SATA. Eu quero realmente adicionar um ouvinte sobre este elementos div. Então vamos fazer isso. E ouvinte em nossos elementos pais div. A primeira coisa que queremos fazer é definir essa div em uma variável. Então vamos defini-lo como três. E, claro, começamos com nossos objetos de documento. Obtemos elemento por ID. A identificação aqui é três, uma secagem bem simples. A próxima coisa que quero fazer é adicionar um ouvinte de eventos. Então isso é acesso. Adicionar ouvinte de eventos. Nós vamos estar ouvindo para o evento clique. E então vamos chamar o nosso próprio manipulador personalizado, encerrá-lo. E queremos ouvir isso e executar esse identificador quando eu quiser fazê-lo durante a fase de captura. Então é por isso que temos que especificar true como o terceiro argumento. E finalmente, só temos que definir nosso manipulador. Um. Muito simples, muito intuitivo. E eu quero que um console registre algo na tela. Digamos que você foi parado em seus trilhos. E a última coisa que quero fazer é pegar nosso evento em si e como fazemos isso? Bem, podemos definir isso em qualquer variável. Nós uma vez, lembre-se que eu disse que a maioria dos desenvolvedores na prática padrão para apenas defini-lo como E. Então agora nós queremos pegar nosso evento real e queremos chamar este método de propagação stop nele. Espero que isso esteja fazendo sentido. Então vamos pensar sobre o que vai acontecer quando entrarmos e clicarmos no botão um. Sabemos que o evento começa na raiz, não é? E ele percorre cada elemento. Ele vai eventualmente acertar os três elementos, que também tem o mesmo método de escuta de evento clique nele, aquela coisa e executar essa função. Neste caso, ele vai para o registro do console, você foi parado em seus trilhos. Mas depois vai parar a propagação. Vai impedir este veado de viajar mais longe. Então eu não esperaria que essa função de manipulador de cliques seja chamada. Vamos ver se escrevemos. Vamos para o nosso navegador. Vamos abrir o console. E vamos clicar neste botão. Você está pronto? Você foi parado em seus trilhos e nada mais acontece. E para provar isso para você, vamos até aqui e comentar a propagação de parar. Vamos voltar ao nosso console, limpar e clicar nele novamente. Este será o comportamento padrão. Isso vai mostrar que você foi parado em seus trilhos, mas então ele vai continuar para baixo. Vai apertar esse botão. É manipuladores de eventos vai ser chamado, e então ele vai ser chamado novamente durante a fase de borbulhamento. Então, aí está. Espero que seja hora de afundar. Espero que esteja começando a se tornar mais intuitivo. E como você pode ver, não é tão difícil assim que entendemos o básico, não é? Antes de passarmos para a próxima palestra, eu só quero mencionar algo rapidamente e que é este método de parada de propagação vai parar o movimento das veias viajando para cima, certo? Mas no elemento atual existente, todos os outros manipuladores serão executados. Em outras palavras, se um elemento tiver vários manipuladores de eventos em um único evento , mesmo que um deles pare o balbling, todos os outros manipuladores de eventos deveriam ser executados. E isso pode ser absolutamente bom um bebê o que você quer. Mas se você realmente quiser parar o processo de borbulhamento e manipuladores pervade sobre o elemento atual de execução. Estes outro método intimamente relacionado chamado parar propagação imediata. Eu só queria que você soubesse que isso existe. E isso só significa que muitas vezes é demitido. Nenhuma outra mão é irá executar mesmo sobre estes elementos existentes. Espero que te divirtas, e vejo-te na próxima palestra. 20. Delegação de eventos — introdução: Em uma das palestras anteriores, vimos que distinguir entre Katherine versus empacotamento é útil, mas talvez não seja inteiramente crucial porque 99% das vezes, nós realmente não nos importamos. Estamos felizes apenas de ouvir um evento sobre a fase borbulhante. Mas isso não significa que balbuciar em si não é crucial para entender. Na verdade, se você quiser levar o seu desenvolvimento web Coreia a sério, precisamos entender balbuciando. E um dos principais benefícios de balbuciar é o que é conhecido na indústria como delegação de eventos. O que é delegação de eventos e como ele se encaixa? Bem, a ideia é muito simples. Digamos que temos um monte de elementos que queremos ser tratados de forma muito semelhante. opção um é que poderíamos anexar ouvintes de eventos a cada um desses elementos. Mas como você pode escapar, estou entendendo isso que é muito ineficiente. Vou ter um monte de código redundante e repetitivo. Então, em vez de colocar manipuladores de eventos em cada elemento único, tudo que você precisa fazer é escolher um ancestral comum, colocar qualquer manipulador de eventos que você quiser em redes e confiar em borbulhar. E o que é muito bacana é que lembre-se que adicionar método ouvinte de evento. O que nos dá quando um evento é bom, nos dá esse objeto de evento. Lembra daquele E? E nesse E podemos realmente acessar o microfone item acionado o evento com sua propriedade alvo de evento. Do que estou falando? Bem, eu acho que a melhor maneira é olhar para um exemplo final onde temos um monte de blocos e qualquer bloqueio clique em, eu quero mudar essa cor. Muito, muito legal. E então eu quero que você tente sua mão em alguns desafios. Então aproveite e comece a perceber. Este é o maior benefício quando se trata de entender balbuciar. Espero que tenha se divertido, espero que tenha tomado um café. Você desperdiça o meu. Porque o meu. Então eu tenho no fim. Sim. Vejo você na próxima semana para aproveitar. 21. Desafio da caixa — introdução: Bem-vindo a este desafio incrível, ou mal posso esperar para entrar nele com você. Mas o que é isso tudo? Vamos, em primeiro lugar, você pode ver que temos uma mesa em nossa tela é um sucesso na mesa. E se eu clicar nessa batida na mesa, nada acontece. Mas o que acontece quando eu clicar em um desses números, basta clicar no número um. Podemos ver que vai ler. Agora, quando eu vou clicar no cabeçalho da mesa, ao redor da mesa, nada acontece que seja limitado no número dois. Agora, como podemos ver, a cor vermelha, essa cor de fundo no número um desapareceu. E agora o bloco número dois tem uma cor de fundo de vermelho. Então eu sei que você pode estar pensando e Clyde, este é um exemplo super simples e você tem 100% de nota. Mas as lições que você vai aprender neste desafio de inibição, muito, muito importante. Então pense em como você pode codificar isso. Lembre-se de uma coisa, queremos confiar no que aprendemos sobre remar. Lembre-se, balbuciar é uma técnica muito, muito poderosa e não muitos desenvolvem como realmente apreciam o poder de entender o público. Eu não quero que você adicione ouvintes de eventos em cada um desses elementos. Eu quero que você adicione um ouvinte de evento no pai porque você sabe que não importa onde você clique no DOM, esse evento clique vai atravessar o Dom, não é que ele vai viajar para cima, ele vai bolhar todo o caminho até o nosso elemento raiz. Então, com isso em mente, dê uma chance, pegue um café e aproveite. Divirta-se com essas coisas, porque é disso que se trata. É sobre se divertir. Mas ao longo do caminho, aprender informações muito valiosas também. Vejo-te na próxima palestra. 22. Desafio das caixas — criando nosso HTML: Nada como um bom café. E isso vai ser um exercício muito divertido. Porque como você viu, o que vamos ter é que vamos ter um monte de pequenos quarteirões quadrados. Quando clicamos nesses blocos, queremos que as cores mudem. E lembre-se do que estamos tentando fazer. Estamos tentando utilizar nosso conhecimento sobre borbulhar porque levedura podemos anexar um ouvinte de eventos individual a cada bloco. Isso significa que o código de operação se torna muito repetitivo e eles se tornam redundantes. Na verdade, não é eficiente em termos de desempenho. Então agora vamos contar com o fato de que não importa onde clicamos, esse evento vai se espalhar. E vai sempre bolhar para além da maior div pai, certo? Então, podemos apenas anexar um ouvinte de eventos à sua div pai, sabendo que sempre temos acesso ao destino do evento em si. Eu sei que você pode estar um pouco estranho com o mais velho, mas não se preocupe, nós vamos discutir isso agora mesmo. Você pode ver aqui que temos nosso editor de texto à esquerda. Temos nosso navegador à direita, então podemos realmente ver o que uma correção nosso código está tendo no navegador. Então, esta palestra específica aqui, eu quero que nós sentemos nosso esqueleto. E na próxima palestra vamos começar a adicionar JavaScript e ver isso em ação. Então aproveite e divirta-se. Esta vai ser uma palestra muito informativa, áudios. Então a primeira coisa que queremos fazer é sentar o nosso HTML. E você pode ver aqui eu tenho um arquivo index.html e eu tenho um styles.css. Então, muito simplesmente, vamos configurar um modelo HTML e vamos começar a criar a carne de nossos lados. Vou embrulhar todos aqueles blocos cinzentos numa mesa. E esta mesa é o que vai ser os pais de tudo o resto. E, portanto, é essa tabela que queremos anexar um ouvinte de eventos. Então eu só quero dar um i D. e lembrar o que estamos aprendendo aqui. Estamos aprendendo sobre delegação de eventos. Então, por que não chamar isso de mesa de delegação por falta de uma palavra melhor? Então eles iriam com o que nossa mesa. E agora o que quero fazer é criar um título para toda a nossa mesa. Vamos adicionar um título com a th tag. E eu não sei, podemos apenas dizer, “ Ei, vamos ter um pouco ousado. Podemos dizer delegação. Tabela, clique para alterar a cor. Então guardamos isso. Lá vamos nós. Podemos vê-lo em nosso navegador, mas isso é apenas o cabeçalho da tabela. O que podemos fazer agora é adicionar outra linha. E nesta linha vamos apenas incluir alguns pontos são agora. E eu quero apenas ousado. Legal no número um. Então lá vamos nós o número 1. E vamos ter três colunas. Então lá vamos nós. Pode haver um, isso pode ser dois, e isso pode ser, essa formatação parece terrível. Você pode ver a unidade à esquerda e os 23 são um monte para os motins. E se você apenas inspecionar isso, você saberá exatamente o que está acontecendo. A propósito, resume-se à nossa batida. Vou mostrar-lhe o porquê agora, apenas expanda isto rapidamente. O que realmente está acontecendo aqui. Zao bater está ocupando todo o espaço em uma cela. Em outras palavras, em uma coluna e é coluna de rede elástica, que é por isso que isso está acontecendo. Então, o que realmente queremos fazer é este título. Queremos nos estender por três colunas, não é? Então vou te mostrar o que quero dizer agora, voltar ao que tivemos. Lá vamos nós. E com essa batida, nós só queremos colspan em três colunas. Lá vamos nós. Agora estão todos uniformemente distribuídos. Então lá vamos nós. Essa é literalmente a nossa primeira fila. Então quero ter outra fileira. E, claro, para isso pode ser cinco e isso pode ser seis. E você adivinhou. Vamos ter outro. Podemos ter 789. Como é que isso parece? Está começando a tomar forma trazida. Mas agora vamos para os nossos estilos aqui rapidamente. Em primeiro lugar, temos de incluir uma cabeça. E dentro da seção principal podemos incluir um link para o nosso arquivo CSS. E sabemos que se chama estilos. Podemos ir para a nossa folha de estilo, é claro que está vazia agora, mas vamos apenas marcar esta mesa para que pareça um pouco mais descolada. Então, como devemos começar a nossa tabela vai em primeiro lugar, vamos pegar a nossa tabela e podemos pegá-la usando seu ID, que chamamos tabela de delegação. Lembra-se? Então temos a nossa mesa. A próxima coisa que queremos fazer é estilizar cada célula, cada célula filha em nossa mesa. Então podemos discar a tag td. E aqui vamos nós. Podemos definir a largura de cada célula, talvez 150 pixels. Está parecendo melhor. E podemos fazer o mesmo com a altura. Vamos fazer talvez um 100 pixels começaria a parecer bom. E podemos pegar a linha para o centro. E vamos dar um bom fundo claro. Então estes são estilo rápido. Ele tem o nosso HTML e agora eu quero que você tente e pense sobre como podemos editar os intestinos para isso. Lembre-se do que queremos fazer quando clicamos em um número, queremos que sua cor de fundo mude para ler. Então, pausar o vídeo aqui, pensar sobre isso e eu vou vê-lo em continuar na próxima palestra. 23. Desafio em caixas — solução: Certo, aqui é exatamente onde paramos. Lembre-se que terminamos nosso HTML e temos esses pequenos blocos legais, ruins, claro, como você sabe, se clicarmos nesses blocos, nada acontece e isso é o que eu quero que façamos agora. Então vamos entrar nisso. Qual é o primeiro passo que precisamos fazer? Bem, vamos cavalgar. Precisamos incluir uma tag de script diretamente. Tag de script. E vamos construir isso lentamente em passos. Certo, então lembre-se do que queremos fazer. Queremos contar com o efeito borbulhante, o fato de que os eventos se espalham pelo DOM. Então, com isso dito, a primeira coisa que queremos fazer é anexar um ouvinte de evento ao nosso elemento pai, que neste caso é a tabela. Então aqui queremos definir uma variável e sua tabela chamá-la. E podemos obter esta tabela acessando um conselheiro que obter elemento por método ID. Sabemos disso, já passamos por isso muitas, muitas vezes e seu id é tabela de delegação. Vamos apenas verificar se é a tabela de delegação de ID. Isso é certo. O que há de legal sobre os editores de texto? Se um destacado podemos ver que é exatamente o mesmo derramamento, carregá-lo, ele vai funcionar, colocá-lo dessa forma. Então lá vamos nós. Nós temos nossa tabela, e agora queremos anexar um ouvinte de eventos. Então toque e ouvinte de eventos. Então, acessamos nosso objeto de tabela. Em seguida, acessamos um método chamado add event ouvinte. Novamente, sabemos disso. Queremos ouvir um evento de clique. E, em seguida, queremos definir nossa função de manipulador de eventos personalizado. E é só chamar isso de mudar de cor porque é exatamente o que queremos fazer. Então lá vamos nós. Quão legal é isso? Nós já começamos a fazer isso. E você pode ver quando fazemos isso fragmentado, não é tão difícil. O próximo passo é, é claro, é que precisamos definir esta função ChangeColor. E o que estamos fazendo aqui? Lembre-se do que vai acontecer agora, quando clicarmos em qualquer uma dessas células dentro da mesa, as veias vão borbulhar para o canto superior direito. E podemos provar que sim. Se nós console log, algo foi clicado e temos o nosso navegador, nós acessamos o console. Só faça isso um pouco maior. Faculty me fazer em tela cheia. Vamos acessar nosso console. E agora vamos clicar em, digamos o número um, algo foi clicado. O número cinco, outra vez, algo foi clicado. A altura dela. Que incrível esse objetivo. Mas vamos continuar. Vamos voltar ao nosso editor de texto. Vamos fazer isso em tamanho real agora. E agora podemos começar a entrar no “nitty-gritty “, certo? Porque agora sabemos que algo foi clicado, mas não sabemos o que foi clicado. E lembre-se, com este método addEventListener, fim de semana dado um objeto real e objeto de evento. E para acessar esse objeto, temos que colocá-lo dentro de uma variável, como mencionei anteriormente no curso, mais comumente, usamos a letra E. Agora temos esse evento e podemos realmente defini-lo em outra variável. Digamos que alvos tardios sejam os togas do evento. E então para provar isso para você, podemos isolar o alvo. Eles saberão exatamente de onde veio esse evento. Vamos voltar ao nosso navegador. Vamos limpar o console e vamos clicar neste primeiro. O alvo não está definido. O que eu fiz de errado? Isso é chamado de terroristas deve ser alvo. Uga. Erro de derramamento simples é voltar para o nosso navegador. Isso é claro, este console e vamos clicar neste primeiro. E lá vamos nós. Estamos literalmente pegando esse elemento td. Quão incrível é essa forte? Então sabemos agora que podemos acessar o item real que é acionado esse evento. Então lá vamos nós. Vamos remover o console. O que você pode pensar que temos que fazer agora é mudar a cor. Mas agora como mudamos a cor? Bem, há algumas maneiras de fazermos isso. A maneira mais fácil que eu posso pensar é definir uma cláusula e, em seguida, apenas adicionar que perto do item que foi clicado. Vamos para a nossa folha de estilo rapidamente. Vou te mostrar o que quero dizer. E o que quero fazer é voltar a aceder à nossa mesa de delegação. E agora o que eu quero fazer é adicionar nossa própria classe personalizada para cada td direitos tag. E eu quero chamar isso de causa, eu não sei destacar porque é isso que nós queremos fazer. Queremos destacar a célula de uma certa cor. E, claro, o que queremos fazer aqui é simplesmente mudar sua cor de fundo para vermelho. Era tudo o que queríamos fazer. Então, se voltarmos aqui ao nosso índice, incrível, então temos nossa classe de destaque, que sabemos que queremos adicionar essa cláusula a qualquer elemento acionar o evento. Como adicionamos uma cláusula? Bem, é muito simples. Podemos acessar nosso alvo. O item que aciona o desviante. O reitor tem um objeto chamado lista de classes. Objeto é um método chamado add in. É realmente assim tão simples. Estamos apenas adicionando uma classe a este elemento. E a classe que queremos adicionar, claro, é destaque. Vamos salvar isso e ir para o nosso navegador. Este vai ser um grande problema com o que acabamos de fazer. Então deixe-me clicar no número um, por exemplo. Alterações para ler. Mas qual é o problema? Você pode prever um grande problema aqui? Bem, é isso mesmo. Se clicarmos em outra célula, o que vai acontecer? Vamos escrever que resolve ir ler, mas a célula original número um iria marcar, não muda. Continua vermelho. Então, há um pequeno problema com o nosso código que eu quero corrigir agora. Podemos voltar ao nosso código aqui. Quero excluir a adição de uma aula no ano passado e mostrarei o porquê em um segundo. O que eu quero fazer agora é que eu queria encontrar nossa própria função personalizada, e você vai ver o porquê um pouco mais tarde. E vamos chamar essa função de destaque. E queremos destacar este alvo, certo? Então o próximo passo que vamos ter que fazer é que vamos ter que definir uma função chamada Destaque. E vai ter um nó. Neste caso, ele realmente vai tomar esse elemento, o elemento alvo. E esta é uma espécie de maneira que eu quero que nós regulemos qual item é clicado atualmente versus o anterior declarado. Então deixe-me explicar. No início do nosso script, Vamos apenas definir uma variável vazia e vamos chamar esse elemento selecionado variável. E inicialmente vamos atribuí-lo a um valor de null. Então o que é realmente legal é que quando começamos a executar esta função de destaque, agora podemos introduzir uma instrução if. E o que isso faz se declaração vai conter? Bem, vamos pensar sobre o que é que queremos fazer quando clicamos em uma dessas células TD, queremos então definir uma variável que é atribuída a essa célula. E na próxima vez que algumas coisas Dan efeito variável tem um valor. Em seguida, queremos remover sua classe da variável head. Sei que parece estranho, mas você vai ver exatamente como isso funciona agora. Então tudo o que eu estou querendo fazer é que queremos dizer se elemento selecionado não é igual a nulo, significa que nós realmente selecionamos um elemento anteriormente. O que queremos fazer? Bem, queremos pegar esse elemento selecionado, queremos acessar seu método de lista de garras. Lembra-se disso? Mas desta vez não queremos adicionar Dewey. Queremos remover essa cláusula chamada destaques. Então agora isso irá remover no elemento previamente selecionado Xj tipo fazendo cenas ou R, isso é tudo bom e bem, mas agora o que eu quero fazer é que precisamos atribuir o novo item que clicamos para a variável de elemento select. Atribua o novo elemento td. Nós clicamos na variável de elemento select. E, claro, esta primeira declaração se está se livrando dos elementos td previamente selecionados. Aula de destaque, isso é meio que fazer santos? Então nos livramos do anterior. Agora queremos que ele atribua o novo elemento td a esta variável. Então, como é que fazemos isso? Seremos muito simples. Nós acessamos nosso elemento selecionado. E, claro, atribuímos isso ao valor do nó. E, em seguida, é claro, o que queremos introduzir executando para acessar o elemento selecionado, seu método de lista de classes. E agora queremos adicionar uma classe chamada destaque para o item recém-selecionado. Meio que faz sentido. Espero que sim, espero que sim. Eu sou apático. Vá para o navegador rapidamente, veja como vamos. Vamos limpar o console e clicar no número um. Então lá vamos nós. É vermelho. Vamos clicar no número 2. - Sim. Uau. Isto é espantoso. Certo? Clique no número 1 novamente. Talvez se você está realmente querendo se tornar uma verdadeira vovó Sterner coisa, você vai notar que isso não é muito perfeito. Por quê? Bem, por algumas razões. Uma é o que acontece se clicarmos neste cabeçalho da tabela? Bem, o cara que podemos ver o aquecimento da mesa remove a cor do elemento td, coloca um problema, certo? E é só refrescar isso. Vamos clicar em um. O que acontece se eu clicar na lacuna? - Sim. Em outras palavras, as margens e os estofos entre si. Bem, a mesma coisa vai acontecer se o usuário acidentalmente fizer isso, a cor desaparece. E não é isso que queremos. Nós só queremos que a cor desapareça quando você clicar em outro elemento td, um elemento filha tabela, vacinas. Então ainda há algo que temos que fazer para acabar com isso e aperfeiçoar foi o vídeo agora e tentar descobrir. Isso realmente é uma solução rápida. Mas é um pouco de nuance. Isso é bastante complicado. 24. O que é a API do is: Antes de seguirmos em frente, eu só quero esclarecer algo que você pode estar se perguntando sobre. E isso é o que é essa propriedade de lista de classes se tivéssemos que existir? Bem, deixe-me apenas dizer que a lista de classes é uma API, e esta API retorna uma lista de token DOM ao vivo. E o que eu quero dizer com uma API vai apenas permanecer o deck quando estamos trabalhando no navegador. O navegador em si nos fornece muitas APIs diferentes. Já passamos por isso antes. Uma dessas APIs é fria, essa lista de classes e outros soquetes web APIs. Também temos a API das veias, excêntrico cetera. Este é apenas um de muitos. E o que essas listas de cláusulas nos permitem fazer? Bem, isso nos dá uma maneira fácil de pegar todos os lançamentos de um determinado elemento HTML. E tenho certeza que você já pode adivinhar o quão útil isso será. Por exemplo, podemos usar essa propriedade para adicionar, remover e alternar classes CSS em um elemento em tempo real. E já existe há algum tempo. Na verdade, ele foi introduzido pela especificação HTML5. E a coisa realmente legal é que nós temos um monte de métodos disponíveis para nós nesta lista de classes API. Temos adicionar, remover contém links de itens totais para string e valor. Não vamos usar tudo isso no curso, mas vamos usar os mais populares. Vamos usar adicionar, remover e até alternar. Este ECG está a fazer cenas. Você pode estar se perguntando, porém, o que é essa lista de token DOM? Sobre o que é isso tudo? Bem, isto devolve um rolo de tambor. bastante óbvias. Tenho certeza que você adivinhou isso. É um tipo especial de lista. E é uma lista que nos dá todos os métodos que acabamos de ver no slide anterior. Lembre-se, Adicionar, Remover, alternar, et cetera, et cetera. E você provavelmente só encontrará a lista de token DOM com esta API de lista de classes. Então lá vamos nós. Eu só queria lhe dar rapidamente um resumo do que a Cláusula listada propriedade era. Espero que estejas a aprender uma tonelada e vejo-te no próximo Desafio. 25. Desafio em caixas — aperfeiçoando nossa solução: Você descobriu isso? Não te preocupes se não o fizeres. Isso não é o que importa. O importante é que pensaste um pouco e tentaste. Vamos ao editor de texto aqui. E como podemos lidar com isso? Bem, temos que voltar para a fonte. Lembre-se da função de destaque, só queremos que isso aconteça. O que nós clicamos em é um elemento TD. Tudo o resto. Na verdade, queremos que nada aconteça. Se o usuário vai e clica na batida da tabela, queremos que nada aconteça. Então nós sabemos por causa dessa razão, nós precisamos tipo de ter um gatekeeper, net gatekeeper pode ser esta primeira função, esta função ChangeColor. Então o que não queremos fazer é chamar essa função de destino de destaque imediatamente. Precisamos de uma declaração de “se”. Não se preocupe. Vamos começar com uma declaração “if”. E se você não tem certeza de como a instrução if funciona, por favor, confira meu curso de JavaScript completo de grandmaster. É realmente incrível. Mas de qualquer maneira, para aqueles de vocês entenderem o que é, ótimo, vocês serão capazes de acompanhar. Qual é a primeira coisa que podemos testar para isso? Novamente, as muitas maneiras de esfolar um gato quando se trata de programação. Isso apenas lidar com a situação que o elemento alvo com Tiktok não é igual ao elemento td. Então o que podemos dizer então é que o nome da tag de destino, certo, não é igual a TD. Nesse caso. Não queremos fazer nada. E nós podemos apenas executar uma instrução return que em efeito, dizer ao analisador JavaScript para sair desta execução se todo. É tudo o que estamos a fazer. Mas então, é claro, queremos lidar com a situação da maneira. Esse nome é Td. Então, o meio para a declaração mais simples. E, claro, aqui sabemos que o elemento que clicamos é um elemento TD. E nesse caso você é 100%, certo? Este é o lugar onde queremos executar uma função de destaque e passar no alvo como seu argumento. Tripulação, fizemos uma quantidade incrível ou esperamos que tudo esteja fazendo sentido. Vamos voltar ao nosso navegador. Limpe o console, Vamos clicar em um. Basta clicar no cinco, começar a trabalhar. Agora vamos clicar no cabeçalho. Nada acontece. Vamos entrar entre estas células. Nada acontece. Então nós temos literalmente uma mesinha perfeita. Que incrível o fim de Herbie se divertir. Espero que tenha aprendido muito nesta palestra. E se voltarmos ao código, sim, basta levar o seu tempo, passar por isso, entender passo a passo o que fizemos muito rapidamente. Tudo o que fizemos foi, obviamente, definimos nosso HTML no topo. Fomos para o arquivo styles.css, quais estilos eu vou tabela muito bem. E, em seguida, na parte inferior, temos o nosso JavaScript todo fechado dentro de uma tag de script. E dentro da tag script começamos definindo uma variável chamada elemento selecionado. E lembre-se por que fizemos isso. Fizemos isso para que possamos manter o controle de qual item com selecionado no momento e quando selecionamos um novo elemento, fomos para remover essa cláusula de destaques no elemento anterior que selecionamos. Por quê? Inicialmente, apenas definimos uma variável vazia. E esse tipo de variável nos ajuda a manter o controle de qual item está selecionado no momento. Dentro agarrar nossa tabela, adicionamos um ouvinte de eventos a essa tabela e usamos borbulhamento de eventos sempre que um evento de clique é borbulhado para essa tabela, esta função ChangeColor vai ser executado. Verificamos se esse elemento alvo, o elemento que disparou o evento clique. Verificamos se isso é um elemento TD. E se for, executamos uma função chamada que realce função verifica o elemento selecionado. E se não for nulo, ele remove o nome da classe. E depois que se instrução é executado dentro atribuir o novo nó com clicado no elemento selecionado, e, em seguida, adicionar uma classe de destaque a ele. Hoje temos a sério Walden, você veio tão longe, você fez tão bem. E agora eu quero que você tente a sua mão em alguns desafios. Eu acho que você sim, eu acho que naquele momento, você fez uma quantidade incrível a sério, sorte precisa também comemorar essas coisas. Desculpe, vou tirar a música. E dança pouco. Relaxe e aproveite. Pegue um café. E vejo-te na próxima palestra. 26. Desafio do cotações — introdução: Bem-vindo a mais um desafio. Espero que esteja se divertindo. Na verdade, eu amo essas coisas e eu amo colocá-las juntas e passar por elas com você é realmente fascinante. Estou apenas aproveitando, mas chega, gordura, gordura. O que é esse desafio? Bem, eu tenho certeza que você provavelmente pode adivinhar, mas aqui nós temos três citações gerais em seu próprio blog. E quando você clica no pequeno x no canto direito, o que acontece? Isso é certo. Ela foi embora. Remove-o completamente. É então aniquilar. De qualquer forma, você começa o ponto quando o usuário clica nisso. Que aspas inteiras devem desaparecer. Imagem apenas atualiza seria quando o usuário clica na cotação real, nada deve acontecer lá. Somente quando o usuário clica nesse botão. Só pensei que era antigo. Então dê uma chance. Na próxima palestra, vou codificar o HTML com você. Se você não quiser codificar HTML, tudo bem. Eu não criei o arquivo, mas sério, é a melhor maneira de aprender. Então, independentemente de se você está indo para codificar o HTML comigo e eu vou vê-lo no vídeo soluções, bem como onde nós codificar o JavaScript, manipular o DOM, utilizar delegação de eventos restante sobre conhecimento de borbulhar. Não queremos colocar ouvintes de eventos em cada um desses pontos. Queremos colocá-lo nos elementos de um pai. Certo, então tenha isso em mente. De qualquer forma, aproveite um café, e te vejo na próxima palestra. 27. Desafio de cotações — criando nosso HTML: Incrível. Estamos entrando no próximo Desafio. E como sempre, o know-how funciona quando eu escrevo o HTML com você porque eu acho que é base para aprender dessa maneira. Eu realmente quero e eu encorajo você a seguir junto. Mas se você não quer seguir adiante e você realmente é um monstro em HTML e todo esse tipo de coisas. Não entre em pânico. Incluí um link para o HTML nesta palestra. Então você pode apenas pegar a partir daí. Mas se você veio para o código ao lado de mim, ótimo, Vamos entrar nele agora você pode ver meu código Visual Studio em branco e o navegador sobre os direitos. E tudo o que tenho são dois arquivos, um arquivo de índice e um estilo. É isso. Por onde começamos? Como sempre, quero começar com um arquivo HTML simples. E antes que esqueçamos isso, basta incluir nossa folha de estilo. Agora mesmo. Lá vamos nós. Eu vou folha de estilo está tudo conectado e eles começam a apodrecer corpo. Lembra o que tentamos fazer? Estamos tentando utilizar nosso conhecimento de borbulhar. Ok, então eu quero envolver todo o código dentro, chamá-lo de uma delegação de, Vamos criar uma div com ID de delegação dentro desta caixa de delegação div, tudo isso abrangendo um, o desenvolvimento pai. Eu quero ter entre aspas e cada citação parece o mesmo. Lembre-se que temos um título, compramos um certo fundo. Temos a fronteira superior. E porque eles são meio repetitivos, o que devemos fazer é criar uma cláusula e alugar cada porto dentro de outro desenvolvimento com uma certa cláusula. Então, com isso dito, vamos criar uma div e vamos ter uma classe de caixa porque é isso que estamos fazendo. Colocamos cada aspas em sua própria caixa. Neste ponto, lembre-se do que fizemos. Temos a nossa caixa e dentro de cada caixa queremos citar e lembrar o que cada cabeça bastante. Então, um simples, ele tinha um título e então ele tinha que realmente leva. E, claro, temos o botão de fechar no canto superior direito. Então, em primeiro lugar, vamos fazer o bater isso apenas para uma tag H3 porque eu não quero que ele tão grande. E bater pode ser frio em um quadril, quadril, quadril. Aqui vamos nós. E eles podem precisar de parar de fazer. Então, a citação pode estar apenas em uma tag de parágrafo normal. Temos o nosso parágrafo e em vez de digitá-lo fora de apenas economizar tempo, eu realmente salvei todas as citações e outras telas deliciosas copiar e colá-lo. Sim. Estes são como um hipopótamo. Um hipopótamo ou apenas uma otimização muito legal. Para uma brilhante, brilhante, é uma piada típica de pai, não é? De qualquer forma, temos o nosso rumo, temos adquirido, e depois precisamos do botão de fechar. Não quero que você crie uma tag de botão com uma classe de legal vicioso, ele removido. E nós só queremos incluir o pequeno XD. Então sabemos que isso é um botão. Nós clicamos nesse botão e queríamos nos mover. Não se preocupe com o estilo disso. Agora, vamos entrar nisso na nossa folha de estilo. Isto é apenas ficar fora do HTML. Então lá vamos nós. Idéia é oferta citação, tudo o que temos que fazer agora é copiar. Isso faz voa diretamente Salvar e eles são todos os pedidos. Como alguém era isso, isso mudou. Claro, cada um desses títulos, essa batida pode ser fria. Continue indo. E deixe-me pegar o texto na outra tela. Sim, equidade. E esta citação era de Winston Churchill. E então, finalmente, vamos ao “Perdido”. E podemos dizer, preste atenção. Mais uma vez, deixe-me copiar e colar isto da minha outra tela aqui só para nos poupar tempo. Lá vamos nós. Legal hackles isso. Então estes são HTML. A última coisa que eu quero fazer para limitar apenas rolar para o topo aqui é apimentar isso um pouco , aplicando estilística legal foi feito folhas de estilo Talk e faz pensamento jazzing este up. A primeira coisa que eu quero fazer é em um agarrar nosso corpo, ok, e eu quero estilizar tudo em Próximo, e vamos lidar com margem primeiro. Digamos que queremos uma margem de 10 pixels e queremos tudo alinhado ao centro. Podemos então definir uma largura de 450 pixels. Como é que isso parece? E olhando boas secas santas. Tem uma largura de massa para nós. E, em seguida, as fontes são apenas média. Então vamos apenas colocar font-family. Unidade coreana. Isso é divertido. David, isso parece muito legal. Parece que é uma citação adequada. Estatísticas acima amigo, eles começam a ficar mais específicos agora. E vamos parar de trabalhar no topo. Vamos conversar trabalhando com nossa tag h3. O, vamos apenas nos livrar da margem. E podemos ter um pouco de estofamento na parte inferior. Então isso é bom. Enchimento inferior. Eu não sei. Caminhão de 0,3 m. Sim, está tudo bem. Então é assim que H3. Agora, eu quero começar a trabalhar com o nosso parágrafo. Vamos levantar pai ou desligar novamente, esta margem de remoção. E novamente, eu quero afetar o fundo do preenchimento ou o fundo do preenchimento. E incógnitas. 0.5 Mire um pouco mais, talvez 0,8 para ele. Acho que isso parece bom. Vamos H3 e nosso parágrafo. A próxima coisa que eu quero estilizar é este botão de remoção. Devemos fazer isso? Na verdade, você sabe o que, antes de eu fazer o botão remover, deixe-me realmente estilizar uma caixa porque então você vai ver tipo de maneira que nós posicionamos esse botão ou ser mais fácil de ver. Então tudo o que queremos fazer é pegar o nome da turma da caixa. Lembre-se, sim, nós podemos aplicar uma cor de fundo disso, apenas dizer roxo, mas eu vou mudá-lo agora. Então vamos pairar sobre isso. Isto é realmente algo legal sobre o editor de texto. E podemos fazer o estilo literário do jeito que quisermos. Como é que isso parece? Vamos colocar rosa, não é? Talvez devêssemos fazer isso, você sabe, eu posso fazer uma bela cor azul. Como é isso? Sim, isso é fixe. Eu gosto disso. E nós o tornamos um pouco mais transparente. Lá vai você. Eu gosto disso. Vamos adicionar um pouco de preenchimento. Sim, parece melhor. E já está começando a parecer legal com agora você pode ver que uma mentira unasaspas joga no outro. Então vamos apenas separá-lo por ter fronteira muito legal. Na verdade, quero ter apenas uma prancha no topo para podermos ir ao topo da fronteira. Dois pixels, azul sólido. Como é que isso parece? Sim, eu sou os netbooks ou pelo menos agora você pode distinguir uma citação da outra. E agora a última coisa que quero fazer é rolar para baixo. Sim, mas como eu queria estilizar aquele botão de fechar, então nós demos uma classe de remoção. Lembre-se que se eu tiver o nosso arquivo HTML e nós rolar para cada um desses botões, você pode ver cada botão tem uma cláusula ou remover. Então é isso que estamos fazendo aqui. Nós vamos ter uma equipe de TI falsa em primeiro lugar, eu quero que a posição seja uma posição absoluta, porque lembre-se, nós queremos colocar isso nos principais direitos de cada citação, aka de cada div com uma classe de caixa. Portanto, queremos que a sua posição seja uma posição absoluta. Mas vamos ter um pequeno problema com isso que vou mostrar agora. Então temos uma posição absoluta, que é legal agora precisamos movê-lo se afetarmos seu posicionamento superior para 0, você pode ver que eles estão empilhando um sobre o outro. Então, embora quiséssemos ser um posicionamento absoluto, queremos que seja sempre relativo ao seu pai. E a div pai é Boston. E para fazer isso, temos que ir para esta caixa faz e, em seguida, as coisas da caixa, podemos ter uma posição de relativo. Lá vamos nós. Agora, cada botão Remover será posicionado em relação ao seu pai. Isso faz sentido? Então é por isso que fizemos isso, você sabe, devemos fazer um comentário. Sim. E o comentário pode ser que queremos que cada botão seja colocado em relação ao seu pai. É por isso que estamos fazendo isso. Então lá vamos nós. Isso faz muitas cenas. E é claro que queremos que o botão aperte para a direita. Na verdade, talvez possamos ter um time pixels da direita. Como é que isso parece? Começando a ficar bem, certo? O que mais podemos fazer? Podemos remover a fronteira. Ok. Então, não há fronteiras. Como é que isso parece? Sim, meu nome está procurando. Ok. O que mais podemos fazer? Podemos adicionar um plano de fundo. Vamos ter transparência. Não queremos que o cinza não pareça bonito. Vocês estão começando a olhar melhor mão, a cor, é claro, pode ser vermelho escuro. Como horas. É melhor. A outra coisa que podemos fazer é ver se passarmos o mouse com o mouse, não muda esse símbolo engraçado da mão. Então, é claro que o que podemos fazer é que podemos afetar sua propriedade cursor e fazer que um ponteiro é agora se passarmos sobre essas pequenas mãos e é um pouco pequeno. Então vamos torná-lo um pouco maior. Tamanho da fonte. Vamos fazer com que seja um pouco melhor, e acho que está tudo bem. Acho que isso parece ótimo. Obviamente, podemos passar muito mais tempo tornando-o mais bonito. Mas para os propósitos desta palestra, já fizemos o suficiente. Temos nossas três citações. E claro, eu acho óbvio o que eu quero que você tente e faça. Quando você clica sobre isso para cruzar o botão de fechar. Quero que essa citação desapareça. Então temos o nosso HTML. Lembra-se do que fizemos? Definimos um elemento div geral, um elemento ativo. Vamos utilizar podridão porque aprendemos sobre balbuciar. E este vai ser o único que ouve as nossas veias pegajosas naquele botão de fechar. Isso faz sentido? Legal, então dê uma chance. E na próxima palestra, vou codificar a solução com você. Abraçado se divertindo com ele dizer fim. E vejo-te na próxima palestra. 28. Desafio da cotação: solução: Woo hoo. Espero que tenha se divertido e que esteja aprendendo e espero que ele tenha dado uma chance, porque isso é o mais importante. Mas sim, todos nós sabemos, quero fazer agora é que eu quero adicionar nossos JavaScripts, quero adicionar esse ouvinte de eventos, e eu quero que nós utilizemos o evento bubbling. Deixe-me expandir o editor de tomadas agora. E isso está começando a tocar nossa tag de script. Você vai se surpreender com o quão simples é a solução, a propósito, não é realmente difícil? Qual é a primeira coisa que temos que fazer? Bem, vamos arrasar. Queremos anexar nosso ouvinte de eventos a algo, certo? Então, digamos delegação tardia. O atribuído ao valor do nosso div real com ID de delegação, porque esse é o único que queríamos ouvir o que eu veia em, certo. Não queremos anexar uma caixa de distribuição de fraqueza que seja muito pesada e seu desempenho ineficiente. Queremos ser verdadeiros domínio de codificação de grandmasters. Então começamos com o nosso objeto de documento. Sobre esse objeto de documento, já sabemos disso. Há um método chamado get element by ID. E, claro, o ID que queremos FH é delegação. Acho que é o que chamamos de delegação de identificação. E isso é certo. Então lá vamos nós. Esse é o primeiro passo. O segundo passo é que queremos anexar nosso ouvinte de eventos. Então, saímos da delegação. Nós existimos agora um método diretamente sobre este chamado add evento ouvinte. Queremos ouvir eventos de clique completo. E quando eles clicam evento é disparado, queremos executar o nosso manipulador eo manipulador removido por falta de uma palavra melhor. Claro, agora temos que definir nossa função que nomeamos removida. E agora você pode pensar que é complicado, mas não é tão complicado. O que vamos fazer agora? Será que um monte de codificação vem através de tentativa e erro. Então o que posso fazer é codificar algo que não funcionou bem, mas vai nos levar a meio caminho. A primeira coisa que queremos fazer é acessar os alvos da veia, não é? Queremos descobrir como esse evento vem. E para isso, temos que acessar o objeto de evento real que nos é dado nesta função callback. Como é que fazemos isso? Bem, como você sabe sobre agora, nós colocamos em uma variável e nós tipicamente chamamos de variável e. E , a fim de acessar nossos alvos, nós podemos apenas definir uma variável chamada target, e nós acessamos nosso objeto de evento e nós obtemos um propriedade chamada target nele. Isso nós sabemos. Agora o que queremos fazer é remover não apenas o alvo real, mas queremos remover o nó pai, o elemento pai. Lembra como estruturamos nosso código? Deixe-me rolar até aqui. Cada citação como destruída e o quê? É certo. Está envolvido em seu próprio elemento div com uma classe de insetos. Então poderíamos dizer, se clicarmos dentro de uma citação, queremos remover seus elementos pai. E, claro, se você remover seu próprio elemento pai, isso é remover todas as crianças também. Com isso dito, você pode estar pensando a maneira mais fácil Clive é apenas para agarrar esses eixos alvos, seu elemento pai através do método elemento pai. No pote DOM uma da série, entramos em um monte de detalhes em elementos pais e como atravessar o DOM. Isso é específico para uma razão pela qual se torna muito útil. E sobre isso, queremos acessar um método chamado remove. Então vamos salvar isso e ir para o nosso navegador. Vamos expandir nosso navegador. E agora vamos clicar em continuar. Oh cara, ele removeu, mas não deveria ter feito certo? Porque só devemos removê-lo quando clicarmos nisso. Ok, então é meio que Hoff trabalhando e isso é o que eu disse antes quando você poderia tentar tentar. E como você verá, você sabe, podemos continuar melhorando nosso código enquanto avançamos. Ver-me atualizar a página e voltará para o nosso editor de texto. Então, como lidamos com o fato de que nós só queremos remover o elemento pai quando aquele pouco dói, esse botão fechar é clicado. Uma maneira que podemos fazer isso é usar a instrução if. E as muitas maneiras que podemos utilizar a instrução if também. Eu só vou começar dizendo se o alvo, lembre-se que o alvo é a coisa, aquele elemento que disparou o evento tick. Se esse destino, se seu nome de classe não for igual a remover. Lembre-se porque todos os nossos botões têm uma classe de removido. Se esse elemento que marcamos não tem a classe de remoção. Sabemos que não é o bastão. Então, nesse caso, não queremos fazer nada. Nós só queremos sair desta declaração se. Senão. Este é o bloco de código de cache. Sabemos que o elemento que marcamos tem um nome de classe de remove, caso em que isso significa que é o botão. Então, nesse caso, queremos executar o método remove em seu elemento pai. Isso faz sentido? Espero que sim. Vamos refrescar. E agora se eu clicar em um, batendo todas as aspas, nada acontece. Mas se passarmos o mouse sobre um desses botões de fluxo e clicarmos nisso, ele se foi. Que incrível. Então lá vamos nós. Espero que se divirta muito, infeliz me seguindo. Espero que você esteja entendendo como estamos sentando o código e como estamos utilizando a delegação de seres via borbulhante. É realmente interessante e você se tornando um mestre neste banal. Enquanto isso 29. Desafio de lista — introdução: Eu amo essas coisas sérias, muito divertido. E é por isso que eu continuo colocando desafios e exemplos práticos. Ai aproveite e seja eu acho que você vai tirar toneladas disso. Lembre-se, este curso está equipando você para aprender a codificar eficientemente e essas leis. Poucos desafios, incluindo este, é utilizar o conceito de borbulhamento de eventos. E fazemos isso por delegação de eventos. Lembre-se de uma delegação de veia e até mesmo borbulhando trabalho de mãos dadas. Eles estão muito intimamente relacionados. E quanto mais você praticar isso, o lance na Coda você vai se tornar. Mas de qualquer forma, chega disso, o que é esse desafio? Bem, como você pode ver, nós temos um texto muito simples olhando na tela, HTML. E eu deliberadamente não queria gastar um monte de Thomas CSAs. Eu só queria que você aprendesse esse conceito e então vamos seguir em frente como eu tenho certeza que você talvez já possa adivinhar. Tudo o que queremos fazer coleta itens e itens afiados quando você clica neles. Se tomarmos carnes vermelhas, cara, isso se foi. Se clicarmos em outro, isso se foi. Se clicarmos em vegetais, toda a lista se foi. Para clicar nele novamente, ele aparece. Se clicarmos em uns nojentos em colapsos, se clicarmos em encontros que colapsam. Então lá vai você. Eu acho que você entendeu o ponto. E lembre-se que estamos querendo utilizar a delegação de eventos. Então certifique-se de ler tudo em um elemento e ouvir um evento clique sobre esse elemento porque você sabe, ele vai bolhar para cima. Então dê uma chance. Espero que se divirta. Fique motivado e te vejo na próxima palestra. 30. Desafio de lista — criando nosso HTML: Ou estranho. Então eu vou parar de passar por isso muito rápido porque você está ficando bom. Então vamos começar a criar nosso HTML de forma rápida e eficiente. Aqui vamos nós. Temos o nosso corpo. O que eu quero fazer, bem, nós precisamos criar ou a lista dela apodrece e eu sei que vai parecer um pouco complicado, mas vamos chegar lá juntos. Então vamos começar rachando. Lembre-se, queremos utilizar borbulhante de eventos. E para fazer isso, temos que criar um tipo de elementos pai que captura todos os eventos. Então vamos fazer isso. Podemos chamar-lhe a etiqueta UL e isso pode ter uma identificação da comida. E como sabemos, todas as listas não ordenadas têm que ter um item de lista dentro dela. Então eu vou primeiro item listar pode ser carnes. E eu vou segunda lista item pode estar sob nenhum vegetal. Lá vamos nós. E se guardarmos isso e atualizarmos nossa página, podemos ver que temos carnes e vegetais. Bastante simples. Agora lembrem-se, queríamos criar todo um tipo de estrutura de árvore de listas e tudo mais. Então dentro disso encontra uma mentira, eu realmente quero criar outra lista não ordenada. E lembre-se que eles queriam alcançar, dividi-lo ainda mais em chamá-lo de carnes vermelhas e outros. Então, a fim de fazer isso, podemos apenas criar outro item de lista. Isso pode ser carnes vermelhas. E é claro que podemos ter um aqui dizendo para salvar isso e podemos parar. Podemos vê-lo que está tomando pleno e está tomando forma e o que vem a seguir? Bem, lembre-se que quando um usuário clica na taxa e come, queremos outra estrutura anti e menos para exibir. Então, dentro List atende queremos outra tag UL e podemos ter alla, listar itens de carnes vermelhas. Então podemos escrever carne bovina, cordeiro e POLQA. Será que esse olhar agora você vai e nós praticamente queremos fazer exatamente a mesma coisa para o outro. Fomos a uma lista desordenada e dentro disso ganhamos três itens da lista. Ou pode ser peixe, frango, e digamos Turquia. Legal, eu sei que é um momento estranho sorteio, todas essas listas e listas desordenadas. Mas vamos seguir em frente. Estamos quase, quase terminando. Podemos realmente fazer a mesma coisa com ferramentas básicas. Permaneça abaixo do rosto para moles. Queremos também sub-rubricas. Podemos ter uma lista desordenada e os dois subtítulos que queremos deliciosos e podemos ter os sortudos. E estes são apenas para Hamline opinião a propósito, quais são deliciosos e quais as tias dentro gostoso, é claro que precisamos de outra tag UL e o, podemos ter nossos itens de lista reais. Bem, o que são alguns vegetais realmente deliciosos? Eu vou adorar batatas? E eu amo espargos. O que mais? Diga uma mentira. Eu gosto de ervilhas. Agora, é hora de tomar forma. E, claro, nos nojentos, queremos fazer exatamente a mesma coisa. Queremos uma lista desordenada com itens de lista sob cada um. Em primeiro lugar, eu realmente não gosto de couves de Bruxelas, embora eu estava com um moldado. E ele fez o processo mais delicioso. E eu não comi isso de novo. Então vou colocar couves de Bruxelas. Não, obrigado. Ponha mais dois. Vamos colocar couve só por causa da discussão. E eu não gosto de cogumelos por alguma razão. Cogumelo está disponível. Não tenho certeza. É só colocá-lo aqui. Então lá vamos nós. Aqui está a nossa configuração geral. Temos os itens da nossa lista, temos as nossas listas. Vou desordenar listas. E temos a nossa última etiqueta UL com uma identificação de comida. E vai ser o que escuta todos os nossos WikiLeaks. Lá vamos nós. Respire fundo. Fizemos o nosso HTML. Mas é claro que agora, quando clicamos em tudo isso, nada acontece. que quero que penses, como é que o recolherias? É bastante complicado. Eu não quero que você se preocupe com o estilo desses itens de lista em uma lista não ordenada. Não se preocupe com isso. Pense sobre o que é que estamos tentando aprender sobre borbulhar de eventos, delegação de eventos e como podemos trabalhar com esses tipos de conceitos para criar É muito legal efeitos e criar uma melhor experiência de usuário. Então pense nisso, divirta-se. E na próxima imagem vai cortar a solução juntos. Vamos ver agora. 31. Desafio de lista — solução: Quem você deu uma chance? Espero que sim. Mas de qualquer forma, aqui estamos nós. Não vou ficar com você. Vou passar pela solução muito, muito rapidamente e explicar cada passo ao longo do caminho. Então, como fazemos isso? Pode ser um pouco complicado, mas você sabe como fazer, vai surpreendê-lo como a solução realmente é simples. Me veja rolar aqui. O primeiro passo, é claro, é que temos que incluir nossa tag de script. Percebemos, e queremos utilizar borbulhante evento e até mesmo delegação. E o que isso significa é que queremos ouvir nossas veias em uma determinada seção e nossa página. Mas queremos ouvir esse evento de um elemento, certo? Porque sabemos contra a Babilônia. E é exatamente por isso que embrulhamos tudo neste elemento de lista não ordenado com uma identificação de comida. Então o primeiro passo é, como você adivinhou, precisamos acessar todo esse item. E fazemos isso usando documento get elemento por ID, que demos um ID de comida. E como tenho certeza que você já adivinhou, o próximo passo é acessar essa variável que acabamos de criar. Em seguida, queremos executar um método nele chamado addEventListener. Estamos ouvindo um evento de cliques, certo? E quando esse evento for disparado, o que queremos fazer? Bem, queremos mostrar ou esconder algo podre. Então, a fim de dançar, folheto e vamos chamá-lo de mostrar ou esconder. E o passo final é definir essa função manipulador. Fazemos isso usando palavra-chave função JavaScript, e nós chamamos-lhe Show Hide. E aqui vamos nós. A carne e os corações do nosso código estão nesta função. Certo, então o que queremos que aconteça? Vamos rolar para cima e Nakoda. Vamos dar uma olhada nesta carne seria, quando clicamos em encontros, o que acontece. Vamos dar uma olhada em seus arredores. Nós sabemos e quando eu clicar em encontros, então em vez disso fomos carnes vermelhas e outros para entrar em colapso. Não leias. A primeira coisa que posso notar no entanto, esta reunião está em uma etiqueta LI. Diz a primeira coisa. A segunda coisa é, sim, podemos colapsar cada um desses aliados abaixo dele, mas é mais eficiente apenas recolher a tag UL, será que o elemento UL dentro dessa tag LI? Porque eu faço sentido. Está bem, fixe. E sobre carnes vermelhas vai ler se encontra conosco a mesma coisa quando clicamos sobre isso e percebemos que ele está em uma tag aliada e que podemos simplesmente recolher o elemento UL embaixo dele. E à medida que você rolar para baixo, você notará que todos os outros elementos funcionam da mesma maneira e tem que estar em uma tag de aliado. E então temos que encontrar seus elementos embaixo dele e depois esconder isso. Então, como fazemos isso? Bem, você verá que não é tão difícil. A primeira coisa é sempre que temos que pegar o alvo, temos que obter o automático deve acionar o evento. Então vamos definir uma variável chamada target. Vamos acessar nosso objeto de evento. E lembre-se que fazemos isso colocando-o em uma variável chamada e. E tem uma propriedade chamada tolerância. Então lá vamos nós. Temos o alvo da veia. O primeiro cheque que quero fazer é verificar se é um técnico aliado. E já fizemos isso antes, então você sabe como fazer, mas podemos acessar nosso alvo. Ele tem uma propriedade tag name. E queremos que o nome da etiqueta seja um aliado, certo? E se isso acontecer, sabemos que então podemos executar nossa função manipulador Qu. E o que queremos que nossa função de manipulador faça? Lembre-se que queremos que nossa função manipuladora esconda ou mostre nosso elemento. Então vamos definir outra variável e vamos chamar isso de UL, colocar a URL que queremos mostrar ou ocultar. Oh, é um nome horrível, mas é exatamente o que eu pensei agora. E agora vamos atribuir isso a dois. Qual valor? Bem, vamos acessar nosso alvo. O nosso alvo vai ser se marcarmos uns nojentos, vai ser esta etiqueta LI Rochester. Queremos acessar isso e, em seguida, queremos consultar, selecionar todos os seus elementos abaixo dele, certo? Para que possamos acessar seus alvos. Podemos então acessar o seletor de consulta método, seletor de consulta, e queremos obter todos os elementos UL. Até agora, tudo bem. Mas se trabalharmos agora com essa variável, o que acontece quando clicamos, diga isso, eu vou pegar couve. Bem, você concorda comigo que, que todos vocês não existem dentro da etiqueta LI. Então será indefinido. Então a verificação de perda que temos que fazer é só dizer se ela existe, então se ela existe, sabemos que não será indefinida. Então podemos apenas dizer se ele existe e como podemos executar nosso código. O que queremos que ele faça? Como vamos esconder que você, eu vou levar, bem as muitas maneiras de esfolar um gato quando se trata de programação. Mas por que não adicionamos uma aula? E essa classe pode ter uma propriedade em sua propriedade display, que pode apenas ser salva para ocultar. E podemos ligar e desligar isso. Deixa-me mostrar-te o que quero dizer. Então vamos para o nosso HTML no topo. Isso inclui uma seção de cabeça dentro disso, um elemento de estilo. E vamos adicionar uma classe chamada Hyde. E como eu disse, ele tem uma propriedade de exibição e nós podemos apenas ter um valor de nenhum. Hoje vamos, definimos uma nova cláusula. Então, no fundo, sabemos que tudo aconteceu de acordo com o plano. Podemos acessar nossa nova variável. Podemos então acessar sua propriedade de lista de garras. Lembre-se, temos feito isso em palestras anteriores, mas agora há um outro método chamado toggle, e é muito útil e seu nome o dá que literalmente alterna, adicionando e removendo uma classe. E a classe que queremos alternar, é claro, é aquela turma da Haida. Vamos verificar se isto funciona. Vamos clicar em encontros. Enquanto esses problemas assumem vazamentos novamente, vamos clicar em outro. Vamos abrir vegetais. Vamos clicar em Anya. Carnes vermelhas, carnes, legumes. Regra. Isto é divertido. E espero que tenha aprendido muito nesta palestra a sério. E às vezes basta dar um passo para trás e passar por isso passo a passo. Lembra-se do que fizemos? Volte para o nosso código aqui nós definimos nossa delegação de evento sendo neste enorme elemento coruja bem no topo, porque sabemos que apenas veias não vai clicar eventos têm em uma bolha acima através dele. Então queríamos ouvir as veias cócegas. E finalmente, quando esse evento acontece, queríamos executar uma função e chamamos essa função de mostrar ou ocultar. A opção Mostrar, Ocultar apenas verifica se o item em que clicamos está de fato em uma tag LI porque não queremos que as coisas se escondam e sejam exibidas quando clicamos aleatoriamente em uma página, tem que estar OK. Verificámos que tinha de ser uma etiqueta de aliado. Em seguida, tivemos que verificar se ele tem de fato esses enormes elementos de coruja abaixo dele. E se isso acontecer, queremos alternar essa classe em um juramento, essa classe de HIV. Então, lá temos. Esperança inserindo no momento, espero que você esteja se divertindo. E vejo-te na próxima palestra. 32. Curso de melhor uso: Muito bem, meus queridos alunos. Bem feito. Você acabou de terminar essa aula incrível sobre conceitos muito avançados. Eu poderia adicionar hierarquia de nós ou hierarquia de objetos, evento capturando qualquer veia pública é então se você realmente está começando a dominar o doador, e eu devo dizer, toda esta série de curso levou a este momento porque na próxima classe, na última aula da série, quero que apliquemos todas as técnicas, todo o conhecimento que aprendemos neste curso. E ouro, um verdadeiro viver com eles. Consegues ouvir aqueles pássaros? Esses são chamados de Hadi. Será que eles são lindos. Cantarolando tenaz agora entrando em agradável Agora onde estava, sim, estamos começando um projeto incrível na próxima perda onde vamos aplicar muitas das técnicas que você aprendeu para construir uma ferrovia de volta. Você vai adicionar coisas dinamicamente ao DOM. Vamos remover coisas do DOM. Vamos permitir que um usuário procure itens no cão Isso vai ser fascinante e também esconder elementos no DOM. Vai ser incrível. Então eu chamo de branco, fique comigo. Você só tem 100 perto de ir. Seria uma pena se parasse agora. Obrigado por todo o seu apoio. Faça a tarefa. É uma missão divertida. Não há certo ou errado raramente porque é um sistema de honestidade. Você só tem que passar pela tarefa, responder as perguntas, e então eu vou te ver, meus queridos alunos na próxima aula.