Τι είναι η εμφάνιση σε JavaScript;

Μηχανισμός με τον οποίο ένα γεγονός που ενεργοποιείται σε ένα στοιχείο DOM διαχέεται "προς τα πάνω" μέσω της ιεραρχίας προς τα στοιχεία γονείς του, μέχρι το ρίζα (document). Κατά κανόνα, τα περισσότερα γεγονότα περνούν από τρεις φάσεις:

1. Φάση σύλληψης: Το γεγονός κινείται από το ρίζα προς τα κάτω προς το στοιχείο στόχο. Οι ακροατές γεγονότων που έχουν προστεθεί με την επιλογή { capture: true } ενεργοποιούνται σε αυτή τη φάση.
2. Φάση στόχου: Το γεγονός φτάνει στο στοιχείο στόχο όπου και ενεργοποιείται. Οι ακροατές που έχουν προστεθεί απευθείας σε αυτό το στοιχείο ενεργοποιούνται.
3. Φάση αναδίπλωσης (bubbling): Το γεγονός κινείται προς τα πάνω από το στοιχείο στόχο μέχρι το ρίζα του εγγράφου. Οι ακροατές που έχουν προστεθεί με την προεπιλογή (χωρίς { capture: true } ή με { capture: false }) ενεργοποιούνται σε αυτή τη φάση. Αυτή είναι η φάση στην οποία συμβαίνει το "bubbling".

Το bubbling επιτρέπει την υλοποίηση της αποστολής γεγονότων (delegation), όπου ένας ακροατής σε ένα γονικό στοιχείο χειρίζεται γεγονότα από πολλά παιδικά στοιχεία.

Παράδειγμα:

// HTML:
// <div id="parent">
//   <button id="child">Κάνε κλικ σε μένα</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', function() {
  console.log('Το γεγονός ανέβηκε μέχρι τον γονέα');
});

child.addEventListener('click', function() {
  console.log('Γεγονός στο στοιχείο στόχο (κουμπί)');
});

// Κάνοντας κλικ στο κουμπί 'child', η ακολουθία εξόδου θα είναι:
// "Γεγονός στο στοιχείο στόχο (κουμπί)"
// "Το γεγονός ανέβηκε μέχρι τον γονέα"

Η μέθοδος event.stopPropagation() μπορεί να χρησιμοποιηθεί για να σταματήσει περαιτέρω διασπορά του γεγονότος (τόσο στη φάση σύλληψης όσο και στη φάση αναδίπλωσης) μετά την επεξεργασία του από τον τρέχοντα ακροατή. Η μέθοδος event.stopImmediatePropagation() σταματά το bubbling και αποτρέπει την ενεργοποίηση άλλων ακροατών στο ίδιο στοιχείο. Το event.preventDefault() αποτρέπει την προεπιλεγμένη ενέργεια του προγράμματος περιήγησης που σχετίζεται με το γεγονός, αλλά δεν σταματά τη διασπορά του.