A bolha de eventos e a captura de eventos são os termos mais usados em JavaScript no momento do fluxo de eventos. Essas são as duas formas de propagação de eventos na API HTML DOM. Este artigo sobre bolhas de eventos e captura de eventos em JavaScript irá descrever em detalhes por que exigimos isso em na seguinte sequência:
O que é bolhas de eventos em JavaScript?
Bubbling de evento é o termo que as pessoas devem encontrar ao desenvolver um aplicativo ou página da web usando . Basicamente, o Event Bubbling é uma técnica na qual os manipuladores de eventos são chamados quando um item é aninhado em outro item e deve ser do mesmo evento. É semelhante ao encapsulamento.
A bolha de eventos é apenas uma pequena parte do tratamento de eventos em JavaScript. Para entendê-lo melhor, temos que saber sobre a Propagação de Eventos e como ela suporta o Event Bubbling.
O que é propagação de eventos?
A propagação do evento pode ser comparada como o termo pai com o borbulhamento do evento e a captura como seu filho.É representado da seguinte forma:
Se você clicar em qualquer imagem, isso não apenas gerará um evento de clique, mas continuará para o pai “a” e o avô “li”. Desta forma, ocorre a propagação da função. Aqui a imagem é considerada filho e é o alvo do evento onde o clique é gerado. A imagem junto com seus ancestrais formam o ramo na terminologia de uma árvore. O branch é importante porque conhecemos o caminho ao longo do qual o evento se propaga.
Cada um dos ouvintes é chamado com um objeto de evento, respectivamente, que reúne informações sobre o evento. Essa propagação é muito importante, pois conhecemos o processo de chamada de todos os ouvintes de um determinado evento. Pela foto acima, podemos notar que a determinação do ramo é estática. Todas as modificações na árvore que ocorrem durante o evento são ignoradas. Aqui a propagação é bidirecional, ou seja, vai da janela ao destino do evento e retorna. Aqui, a propagação é amplamente categorizada em três tipos principais. Esses são:
diferença entre css e css3
- A fase de captura: Indo da janela para a fase de destino do evento.
- A fase alvo: É a fase de destino.
- A fase da bolha: Do pai de destino do evento de volta à janela.
O que é captura de evento?
Nesta fase, são chamados os ouvintes do capturador cujo valor foi registrado como “verdadeiro”. Está escrito como:
el.addEventListener ('click', listener, true)Aqui, o valor do ouvinte foi registrado como “verdadeiro”, portanto, este evento está sendo capturado. Se não houvesse valor, o valor por padrão era falso e o evento não seria capturado. Portanto, nesta fase, o evento cujo valor é verdadeiro só sai da janela e é chamado e capturado.
Então, na fase de destino do evento, todos os ouvintes registrados são chamados, independentemente de seu status de sinalizador ser verdadeiro ou falso.
Uso de bolhas de eventos e captura de eventos em JavaScript
Na fase de Bubbling, apenas o não capturador é chamado, ou seja, os eventos que possuem o valor de flag como “falso”. O bubbling de eventos e a captura de eventos são muito úteis e importantes na terminologia DOM (Document Object Model).
el.addEventListener ('click', listener, false) // o ouvinte não captura el.addEventListener ('click', ouvinte) // o ouvinte não capturaO trecho de código acima mostra o funcionamento da fase de bolha e captura. Nem todos os eventos vão para o destino do evento. Alguns deles não borbulham. Sua viagem para após a fase de destino. O fluxo de fase de três eventos é ilustrado no diagrama a seguir:
O bubbling de evento não funciona em todos os tipos de eventos, no entanto, o ouvinte deve possuir '.bolha ”Propriedade booleana do objeto de evento. Algumas das outras propriedades incluem:
- e.target: que faz referência ao destino do evento.
- e.currentTarget: é o modo no qual os ouvintes atuais são registrados. Aqui, o valor é referenciado usando isto palavra-chave.
- e.eventPhase: É um número inteiro que se refere a outras três palavras-chave, como Capturing_phase, Bubbling_phase, AT_Target Estágio.
Procedimento de trabalho
o que é objeto imutável em java
Vamos dar uma olhada mais de perto na ilustração acima. Vamos clicar no elemento “buttonOne” e imediatamente um evento será acionado. Normalmente, um evento começa sua jornada a partir da raiz, que é o elemento superior da árvore. Em seguida, segue na árvore o evento alvo que é “buttonOne”. É assim que ele viaja:
Conforme mostrado na figura, o evento percorre as terminologias DOM, chegando ao evento de destino no final. Agora, uma vez que o evento atinge seu alvo, ele não termina. Ele continua e continua dentro das terminologias DOM, conforme ilustrado na imagem abaixo.
Assim como antes, cada elemento ao longo do caminho do evento conforme ele sobe é notificado sobre sua existência. À medida que continua assim, você deve estar pensando se podemos interromper o processo ou não. Bem, a resposta à pergunta é sim, podemos parar a propagação do evento. Isso é feito invocando o “StopPropagation” método do objeto de evento.
window.addEventListener ('click', e => {e.stopPropagation ()}, true) window.addEventListener ('click', listener ('c1'), true) window.addEventListener ('click', listener ('c2 '), true) window.addEventListener (' click ', listener (' b1 ')) window.addEventListener (' click ', listener (' b2 '))Ao aplicar a palavra-chave, podemos interromper a propagação. Funciona assim, quando aplicamos a palavra-chave “ stopPropagation ” então, todos os eventos sob os eventos principais não estão sendo chamados e, portanto, não seriam chamados conforme mencionado no trecho de código acima. Existe outra palavra-chave conhecida como “ stopImmediatePropagation ”. Como o nome sugere, ele imediatamente interrompe o processo dos irmãos.
como implementar um hashmap
Com isso, chegamos ao final do nosso artigo. Espero que você tenha entendido o que é Event Bubbling e Event Capturing em JavaScript.
Agora que você sabe sobre o Event Bubbling e Event Capturing em JavaScript, confira o por Edureka. O Treinamento de Certificação de Desenvolvimento Web ajudará você a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implementá-lo no Amazon Simple Storage Service (S3).
Tem alguma questão para nós? Mencione isso na seção de comentários de “Formação de bolhas e captura de eventos em JavaScript” e entraremos em contato com você.