Entenda resumidamente o borbulhamento, delegação, ligação e propagação de eventos JavaScript

Eventos de bolha

1. : a bolha de evento significa que o evento é inicialmente recebido pelo elemento mais específico e depois se propaga para nós menos específicos.
2. O borbulhamento de eventos é habilitado por padrão, mas o borbulhamento de eventos pode ser controlado por meio do código js.

Características:

• Quando nossa função de evento é acionada, a função de evento receberá na verdade um objeto de evento.

• Quando executamos o método event.stopPropagation() em nossa função de evento, o borbulhamento do evento termina aqui.

• Nem todos os tipos de eventos suportam o borbulhamento de eventos.

• O borbulhamento de eventos acionará apenas funções de evento do mesmo tipo.

Duas maneiras de evitar eventos de bolha

Existem duas maneiras de evitar eventos de bolha: uma é uma propriedade e a outra é um método.

cancelBubble

define ou retorna se o evento deve ser propagado para o nível superior.

Sintaxe: event.cancelBubble = true;

stopPropagation()

evita que o evento se propague ainda mais no fluxo de eventos.

Sintaxe: event.stopPropagation();

Exemplo: Vincule funções de resposta de clique a três objetos que são mutuamente pai e filho.

janela.onload=função(){
      var span = document.getElementById("sp");
      span.onclick=função(){
          alerta('tag de intervalo');
          
      }
      var box = document.getElementById('box3');
      box3.onclick=função(){
          alerta('caixa3');
      }
      var corpo = documento.corpo;
      body.onclick=função(){
          alerta('corpo');
      }}

Evitar bolhas na caixa:

janela.onload=função(){
      var span = document.getElementById("sp");
      span.onclick=função(){
          alerta('tag de intervalo');
          
      }
      var box = document.getElementById('box3');
      box3.onclick = função(evento){
          alerta('caixa3');
           event.stopPropagation();

      }
      var corpo = documento.corpo;
      body.onclick=função(){
          alerta('corpo');
      }}

Delegando eventos

Quando temos várias subtags com os mesmos eventos, podemos adicionar eventos a elas percorrendo as subtags, mas se um novo elemento de subtag for adicionado, devemos religar a nova subtag elemento, caso contrário, é inválido.

O atributo

vincula o evento ao elemento ancestral , de modo que quando o evento no elemento filho for acionado, ele irá borbulhar para o elemento ancestral e o evento será processado por meio do evento de resposta do elemento ancestral. Usando bolhas e delegação, você pode reduzir o número de ligações de eventos e melhorar o desempenho do programa.

Obtenha o elemento clicado.

Depois de vincularmos um evento ao elemento ancestral, não importa em qual elemento clicarmos dentro do elemento ancestral, o evento correspondente será acionado. elemento Neste momento, precisamos dar uma condição de julgamento, se é o elemento que queremos acionar o evento.

target

retorna o elemento que acionou o evento.

Sintaxe: event.taget;

janela.onload=função(){
     var ul = document.getElementById('ul1');
     ul.onclick = função(evento){
         if(event.target.className == 'abq'){
             alert('Evento acionado!!')
         } 
     }
     //Adicionar hiperlink document.getElementById('bt1').onclick = function(){
         var li = document.createElement('li');
         li.innerHTML = "<a href = 'javascript:;' class='abq'>Nova tag</a>";
         ul.appendChild(li);
     }
 }

Vincular eventos por meio de addEventListener()

Através desse método, você pode vincular diversas funções de resposta de evento idênticas ao mesmo elemento.

• Parâmetros:

.

1. Se
2. o
3. acionamento do evento na fase de captura requer um valor booleano.

para vincular o mesmo evento a um elemento ao mesmo tempo Defina múltiplas funções de resposta, de modo que quando o evento for acionado, as funções de resposta serão executadas na ordem em que as funções são vinculadas!

janela.onload=função(){
    var bt = document.getElementById('bt1');
    addEventListener('clique',função(){
        alert('A função correspondente ao primeiro clique foi acionada!')
    },falso);
    addEventListener('clique',função(){
        alert('A função correspondente ao segundo clique foi acionada!')
    },falso);
    addEventListener('clique',função(){
        alert('A função correspondente ao terceiro clique foi acionada!')
    }, false);}

Divulgação de eventos

• A Netscape e a Microsoft têm entendimentos diferentes sobre a divulgação de eventos:
  A Microsoft acredita que os eventos devem ser propagados de dentro para fora , ou seja, quando um evento é acionado, o evento no elemento atual deve ser acionado primeiro e depois propagado para os elementos ancestrais do elemento atual, o que significa que o evento deve ser executado na fase de borbulhamento .
  A Netscape acredita que os eventos devem ser propagados de fora para dentro , ou seja, quando o evento atual é acionado, o evento do elemento ancestral mais externo do elemento atual deve ser acionado primeiro e depois propagado para dentro, para os elementos descendentes.
• O W3C combina as soluções das duas empresas e divide a propagação de eventos em três estágios:

1. o estágio de captura. No estágio de captura, os eventos são capturados do elemento ancestral mais externo para o elemento alvo, mas por padrão o evento não será acionado neste momento. .
2. O evento da fase alvo captura o elemento alvo e a captura termina e começa a disparar eventos no elemento alvo.
3. O evento da fase de bolha é passado do elemento alvo para seus elementos ancestrais, disparando eventos nos elementos ancestrais, por sua vez.

A função de resposta é executada durante a fase de borbulhamento. O terceiro parâmetro padrão é false

window.onload = function(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('clique',função(){
         alerta('caixa1');
     },falso);
     box2.addEventListener('clique',função(){
         alerta('caixa2');
     },falso);
     box3.addEventListener('clique',função(){
         alerta('caixa3');
     },falso);
 }

Se quiser acionar o evento durante a fase de captura, você pode definir o terceiro parâmetro de addEventListener() como true!

janela.onload=função(){
     var box1 = document.getElementById('box1');
     var box2 = document.getElementById('box2');
     var box3 = document.getElementById('box3');
     box1.addEventListener('clique',função(){
         alerta('caixa1');
     },verdadeiro);
     box2.addEventListener('clique',função(){
         alerta('caixa2');
     },verdadeiro);
     box3.addEventListener('clique',função(){
         alerta('caixa3');
     },verdadeiro);
 }