Di urutan peristiwa DOM: MENANGKAP vs BUBBLING
Ada dua tahap bagaimana peristiwa disebarkan. Ini disebut "menangkap" dan "menggelegak" .
| | / \
---------------| |----------------- ---------------| |-----------------
| element1 | | | | element1 | | |
| -----------| |----------- | | -----------| |----------- |
| |element2 \ / | | | |element2 | | | |
| ------------------------- | | ------------------------- |
| Event CAPTURING | | Event BUBBLING |
----------------------------------- -----------------------------------
Tahap penangkapan terjadi terlebih dahulu, kemudian dilanjutkan dengan tahap penggelembungan. Saat Anda mendaftarkan acara menggunakan api DOM reguler, acara tersebut akan menjadi bagian dari tahap menggelembung secara default, tetapi ini dapat ditentukan saat pembuatan acara
// CAPTURING event
button.addEventListener('click', handleClick, true)
// BUBBLING events
button.addEventListener('click', handleClick, false)
button.addEventListener('click', handleClick)
Di React, acara menggelegak juga yang Anda gunakan secara default.
// handleClick is a BUBBLING (synthetic) event
<button onClick={handleClick}></button>
// handleClick is a CAPTURING (synthetic) event
<button onClickCapture={handleClick}></button>
Mari kita lihat di dalam 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()
}
Alternatif yang belum saya lihat disebutkan di sini
Jika Anda memanggil e.preventDefault () di semua acara Anda, Anda bisa memeriksa apakah sebuah acara telah ditangani, dan mencegahnya ditangani lagi:
handleEvent(e) {
if (e.defaultPrevented) return // Exits here if event has been handled
e.preventDefault()
// Perform whatever you need to here.
}
Untuk perbedaan antara kejadian sintetis dan kejadian asli, lihat dokumentasi React: https://reactjs.org/docs/events.html