Αναδυόμενα συμβάντα στο JavaScript

Φανταστείτε ότι έχετε πολλά ενσωματωμένα το ένα μέσα στο άλλο μπλοκ:

<div id="elem1">
	<div id="elem2">
		<div id="elem3"></div>
	</div>
</div>

Ας πάρουμε αναφορές στα div μας σε μεταβλητές:

let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');

Τώρα ας προσθέσουμε χειριστές κλικ σε αυτά:

elem1.addEventListener('click', function() {
	alert('πράσινο');
});
elem2.addEventListener('click', function() {
	alert('γαλάζιο');
});
elem3.addEventListener('click', function() {
	alert('κόκκινο');
});

Ας εμφανίσουμε τα μπλοκ μας στην οθόνη, προσθέτοντας κάποια CSS:

Τώρα κάντε κλικ στο πιο εσωτερικό κόκκινο μπλοκ - και θα δείτε ότι το συμβάν πρώτα θα ενεργοποιηθεί στο κόκκινο μπλοκ, μετά στο γαλάζιο, και μετά στο πράσινο. Και αυτό είναι λογικό, αφού κάνοντας κλικ στο εσωτερικό μπλοκ, κάνετε ταυτόχρονα κλικ σε όλα τα εξωτερικά.

Δηλαδή, προκύπτει ότι όταν κάνετε κλικ στο πιο εσωτερικό μπλοκ, το συμβάν κλικ προκύπτει πρώτα σε αυτό, μετά ενεργοποιείται στον γονέα του, στον γονέα του γονέα του και ούτω καθεξής, μέχρι να φτάσει στην κορυφή.

Αυτή η συμπεριφορά ονομάζεται ανάδυση (bubbling) συμβάντων - κατ' αναλογία με την ανάδυση μιας φυσαλίδας αέρα από τον πάτο. Όπως ακριβώς και η φυσαλίδα, το συμβάν μας φαίνεται να αναδύεται προς την επιφάνεια, ενεργοποιώντας κάθε φορά σε υψηλότερα μπλοκ.

Γράψτε μόνοι σας κώδικα που θα επιδεικνύει την ανάδυση συμβάντων. Ελέγξτε πάνω του την ανάδυση διαφορετικών τύπων συμβάντων.

Δεν μπορούν να αναδυθούν όλα τα συμβάντα. Βρείτε πειραματικά τουλάχιστον ένα συμβάν που δεν θα αναδύεται.