Eventos JavaScript: entenda Capturing e Bubbling
Вставка
- Опубліковано 30 сер 2020
- Será que você realmente sabe como funcionam eventos no JavaScript, qual seu fluxo, e como atuar nas fases de Captura e Propagação?
Trabalhar com eventos em JavaScript faz parte do dia-a-dia de qualquer programador front end. Somos acostumados a criar dezenas, centenas, milhares de eventos!
Mas muitos ignoram como realmente se dá a dinâmica de gerenciamento de eventos em JS e, por desconhecer esse fluxo, podem acabar se deparando com problemas que não sabem como resolver.
Neste vídeo, saiba mais sobre evento em JavaScript e aprenda mais sobre o significado de termos como Capturing, Bubbling, Propagation, e como é possível atuar no código para conseguir resultados acurados para problemas específicos de JS.
💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo
/ discord
➡️ Basic Front Boilerplate (BFB)
• Basic Front Boilerplat...
➡️ Classes JavaScript
• Classes JavaScript: o ...
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolvimentoparaweb.com/
Eu entendo com bubbling o seguinte:
Descer no DOM pra capturar um evento em um elemento seria mergulhar numa piscina.
Se borbulhar lá em baixo, as bolhas sobem de volta pra superfície window, que é a fase de propagação e percorre o mesmo caminho que usamos para descer.
Metáfora interessante. :)
Que legal!
é isso
Por isso que eu e muitos já fritamos o celebro ao tentar criar um outSidClick, tipo um click no html para fechar o menu mobile!
Agora tudo ficou claro! hehehe
Parabéns pelo conteúdo(s). Muito bom(ns). Então. Bubbling é como uma abstração de contexto. Ele não tem uma tradução e sim um sentido relacionado a um evento (parece até que tô falando de JavaScript). Vc deve interpretar a palavra Bubbling como por exemplo. Quando um mergulhador solta o ar quando está mergulhando, as bolhas de ar sobem pra superfície. Ou como as bolhas de uma bebida gasosa ou bolhas do Champagne por exemplo. Esse "efeito" das bolhas subindo pra superfície são a interpretação pra o termo "Bubbling". Por isso eles usaram no processo de execução de eventos. Porque quando a execução do código começa a subir a árvore do DOM, de volta ao início é como a bolha do mergulhador que citei ali. A língua Inglesa (geralmente Americana que é mais "vulgar") tem muito disso. É o resultado de uma língua digamos "pobre" ou "simples". Quanto mais simples a língua mais abstração de contexto elas possuem pra complementar seu vocabulário. Se procurar vai encontrar milhares deles por aí. Já que o texto tá grande mesmo, citar uns exemplos.... "Gnard", "Shred" e até frases como "Piece of cake" são alguns exemplos. Grande abraço e desculpe o texto enorme.
👏👏👏
Agora esse termo fez MUITO mais sentido na minha cabeça, obrigado Thiago e obrigado Tárcio!
Que vídeo excelente!
Obrigado!!!
Nós que agradecemos pela participação. Abs, Tiago!
Muito bom! Super bem explicado!
Muito obrigado, Kadu!
Conteúdo objetivo e muito bem explicado, como sempre! Parabéns
Muito obrigado pela atenção de sempre, Hamon! :D
Excelente explicação!!! Muito obrigado pela ajuda!!! :)
Imagina, eu que agradeço a participação, Maiqui.
Tuas aulas são top demais... direto ao ponto... didática show... ajuda muito mesmo! Parabéns! Ganhou mais um inscrito! Hehehe!
Brigadão mesmo, Eduardo! o/
Cheguei dando like e se inscrevendo, conteúdo top;
Muito obrigado, meu caro! \o/
Muito bom! Já usei esse stop propagation e nem sabia que funcionava assim. Ótimo conteúdo!
haha, normal usar assim. A maioria não sabe direito. Quer dizer... Não sabia! :D
Mais claro que isso só o sol do meio dia, valeu amigão!
haha, legal! Imagina! Aquele abraço.
exelente! vi varios outros videos, mas nenhum mostrava graficos e explicacoes tao simples quanto o seu. Muito obrigado pela aula!
Eu que agradeço seu comentário, Ian. :)
Ótima explicação!!!
Obrigado.
meu amigo, que trabalho de corno eu tava tendo sem saber disso kkkkk, vai ajudar bastante, obrigado!
"trabalho de corno" uaehuahe
Bom mesmo!!
Vlw, Roney!
muito obrigado!
Disponha!
Aula mto boaa
Vlw, Mateus!
excelente vídeo
Obrigado, Paulo!
mais um inscrito vídeos top parabéns, será que podia fazer um vídeo sobre a diferença de uma função tradicional de uma arrow function?
Oi, Jackson! Tudo bem? Muito obrigado pela inscrição!
Posso fazer o vídeo, sim. Publicarei em breve. :)
Tutorial excepcional!!!
Que isso, vlw mesmo, Breno!
@@dpwoficial você tem algum conteúdo a respeito de event delegation?
@@brenosouzaesilva7216 Ainda não.
Show! Até refiz o exemplo aqui para estudar. :)
Boa! Assim que aprende! :D
@@dpwoficial Parabéns pelo conteúdo, sempre bem didáticos. É lindo de ver. :)
@@andersonnascimento9864 haha vlw, Anderson! xD
EU TE AMO, MEU NOBRE
haha
obrigado
Eu que agradeço.
"minha vida toda é uma mentira."
ótima aula.
vlwww
Moço eu te amo
Er... OK...? 😅
Top
👊
Tárcio, algum motivo especial para colcolar '$' antes das variáveis?
Ótimo conteúdo!
Abs!
Resquícios da era jQuery... ;D
Sempre que uma var/const é para atribuição de elemento(s), coloco desse jeito. Mas é mania mesmo; não precisa. rs
dpw Obrigado! 😎👊🏻
Uma dúvida, além da função posso passar parâmetros para função da acão "click",
exemplo: el.addEventListener("click", myFuncao, myObjParam, myCallBackExecFimTransacao); ?
Pode passar algo a mais, mas não é qualquer coisa.
Dá uma olhada na documentação: developer.mozilla.org/pt-BR/docs/Web/API/Element/addEventListener
🤙
🤙
Considerando esse capture:true eu consigo usa-lo no contentLoad e verificar se um arquivo foi carregado corretamente ? E se não foi eu posso trabalhar em outras opções. por exemplo : Tenho uma pagina web estática com html css e js , ela tem alguns efeitos apenas de estética com js mas por algum motivo o js não carrega ( intente de celular fraca por exemplo ) então eu posso usar isso pra caso esse Js não carregue eu ative uma classe nos elementos que faz com que essas mesmas animações básicas só que no CSS .É possível isso ?
O indicado é como no segundo cenário que você descreveu: animações no CSS e o JS é só para colocar/retirar classes para "ativarem" essas animações.
Isso funciona como se eu tivesse adicionado o evento de click em cada div separademente, so que nesse caso do video seria de uma forma otimizada utilizando o querySelectorAll e separando o msm evento pra cada elemento? (digo no caso do exemplo no video msm)
Sim, foi adicionado 1 evento para cada div para mostrar como é a dinâmica de capturing e bubbling.
Foi uma forma mais didática; no mundo real, geralmente, é mais eficiente usar event delegation.
voce disse que pegar todas as divs com queryselectorAll não é a melhor maneira. Então qual seria?
Opa, Júnior.
Não quis dizer sobre o querySelectorAll(), em si, mas em pegar as "div" ao invés de elementos com classe, atributo etc.
Tárcio percebi que ao compilar o sass ele joga tudo na pasta dist sem organização nenhuma , em um projeto grande isso seria um grande problema, teria como fazer um video explicando como organizar os arquivos no build ? vlw mestre
Fala, Ygor!
O BFB atualmente serve mais para projetos de estudos -- embora eu mesmo já o tenha usado em projetos "oficiais" menores.
Para requisitos e arquiteturas mais exigentes, ou se complementa/customiza o Parcel (que é a base do BFB) ou se recorrer a alternativas mais robustas.
@@dpwoficial Boa mestre, com breve pesquisa na net achei um plugins do parcel que resolve o problema, qual seria essas alternativas mais robustas ?
@@ygorluiz Gulp e Webpack.
Não entendi pq isto seria um problema, o build não serve só para colocar o app online? Pra desenvolvimento ele não é utilizado...
@@chdrlz Também não vejo como um problema, propriamente dito... :)
01:33 por que você usou o cifrão antes do nome da variável? É alguma convenção?
Sim. Algumas pessoas colocamos "$" no nome para identificar mais facilmente quando a const/var guarda um elemento do DOM.
@@dpwoficialAhhh bacana, não sabia...
porq vc botou o $ a frente das dvis?
Convenção das antigas. Ajuda a identificar uma var/const que referencia um elemento DOM.
cara, mas calma.... se o e.stopPropagation() acontece apenas no bubbling, por que ele parou no "one" se a primeira fase não é afetada por esse método? 🤔🤔
É só uma questão de nomes: .stopPropagation() funciona em ambas as fases, causando o efeito na "direção" correta.
Acho que eles ficaram com preguiça de criar um stopCapturing() ou algo assim. rsrs
Gostei da pergunta. Mostrou que você prestou atenção na explicação. :)
@@dpwoficial no video, ele falou que só afetava o bubbling phase kkkkkk
Não entendi
Qual parte?