event bubbling

Onde usar

Explica por que clicar num botão dentro de um card também dispara o clique do card. Em code review, stopPropagation costuma ser usado para evitar isso, mas pode quebrar outros ouvintes.

Em código

const pai = document.createElement('div');
const filho = document.createElement('b');
pai.append(filho);
pai.addEventListener('click', () => {
  console.log('pai');
});
filho.click(); // imprime pai

Exemplos

The click bubbles up from the button to the card.

O clique sobe do botão até o card.

Calling stopPropagation here hides the click from the analytics listener.

Chamar stopPropagation aqui esconde o clique do ouvinte de analytics.

Cuidado

Usar stopPropagation como solução padrão, o que esconde o evento de outras partes do código.

Sinônimos

propagação de eventos

Antônimos

capturing