Na ordem dos eventos DOM: CAPTURING vs BUBBLING
Existem dois estágios de propagação dos eventos. Estes são chamados de "captura" e "borbulhamento" .
| | / \
---------------| |----------------- ---------------| |-----------------
| element1 | | | | element1 | | |
| -----------| |----------- | | -----------| |----------- |
| |element2 \ / | | | |element2 | | | |
| ------------------------- | | ------------------------- |
| Event CAPTURING | | Event BUBBLING |
----------------------------------- -----------------------------------
O estágio de captura acontece primeiro e, em seguida, é seguido pelo estágio de borbulhamento. Quando você registra um evento usando a API DOM regular, os eventos farão parte do estágio de bolha por padrão, mas isso pode ser especificado na criação do evento
// CAPTURING event
button.addEventListener('click', handleClick, true)
// BUBBLING events
button.addEventListener('click', handleClick, false)
button.addEventListener('click', handleClick)
No React, eventos de bolha também são usados por padrão.
// handleClick is a BUBBLING (synthetic) event
<button onClick={handleClick}></button>
// handleClick is a CAPTURING (synthetic) event
<button onClickCapture={handleClick}></button>
Vamos dar uma olhada dentro de nosso callback handleClick (React):
function handleClick(e) {
// This will prevent any synthetic events from firing after this one
e.stopPropagation()
}
function handleClick(e) {
// This will set e.defaultPrevented to true
// (for all synthetic events firing after this one)
e.preventDefault()
}
Uma alternativa que não vi mencionada aqui
Se você chamar e.preventDefault () em todos os seus eventos, poderá verificar se um evento já foi tratado e evitar que ele seja tratado novamente:
handleEvent(e) {
if (e.defaultPrevented) return // Exits here if event has been handled
e.preventDefault()
// Perform whatever you need to here.
}
Para saber a diferença entre eventos sintéticos e eventos nativos, consulte a documentação do React: https://reactjs.org/docs/events.html