Descreva a propagação de eventos
A propagação de eventos é um mecanismo na DOM (Modelo de Objetos do Documento) em que um evento, como um clique ou um evento de teclado, é primeiro acionado no elemento de destino que iniciou o evento e, em seguida, se propaga para cima (bolhas) pela árvore da DOM até a raiz do documento.
Fase de bolha
Durante a fase de bolha, o evento começa no elemento de destino e se propaga pelos seus ancestrais na hierarquia da DOM. Isso significa que os manipuladores de eventos associados ao elemento de destino e aos seus ancestrais podem potencialmente receber e responder ao evento.
Aqui está um exemplo usando a sintaxe moderna do ES6 para demonstrar a propagação de eventos:
// HTML:// <div id="pai">// <button id="filho">Clique em mim!</button>// </div>const pai = document.getElementById('pai');const filho = document.getElementById('filho');pai.addEventListener('click', () => {console.log('Cliquei no elemento pai');});filho.addEventListener('click', () => {console.log('Cliquei no elemento filho');});
Quando você clica no botão "Clique em mim!", devido à propagação de eventos, os manipuladores de eventos do filho e do pai serão acionados.
Parando a propagação
A propagação de eventos pode ser interrompida durante a fase de bolha usando o método stopPropagation(). Se um manipulador de eventos chamar stopPropagation(), ele impedirá que o evento continue a se propagar pela árvore da DOM, garantindo que apenas os manipuladores dos elementos até aquele ponto na hierarquia sejam executados.
Delegação de eventos
A propagação de eventos é a base para uma técnica chamada "delegação de eventos", onde você anexa um único manipulador de eventos a um ancestral comum de vários elementos e usa a delegação de eventos para lidar eficientemente com os eventos desses elementos. Isso é particularmente útil quando você tem um grande número de elementos semelhantes, como uma lista de itens, e deseja evitar a adição de manipuladores de eventos individuais a cada item.