Βύθιση Γεγονότων στο JavaScript

Εκτός από την αναδυόμενο γεγονότων υπάρχει και η βύθιση. Στην πραγματικότητα, το γεγονός πρώτα πηγαίνει από πάνω προς τα κάτω (στάδιο διακοπής), φτάνει στο στοιχείο μας (στάδιο στόχου) και μόνο τότε αρχίζει να αναδύεται (στάδιο αναδυόμενου).

Για να τοποθετήσουμε έναν χειριστή γεγονότος λαμβάνοντας υπόψη τη στάδιο διακοπής στο addEventListener υπάρχει μια τρίτη προαιρετική παράμετρος. Αν είναι true - το γεγονός θα ενεργοποιηθεί στη στάδιο διακοπής, και αν false - στη στάδιο αναδυόμενου (αυτή είναι η προεπιλογή). Ας δούμε ένα παράδειγμα:

elem1.addEventListener('click', function() {
	console.log('πράσινο - βύθιση');
}, true);
elem1.addEventListener('click', function() {
	console.log('πράσινο - αναδυόμενο');
}, false);

elem2.addEventListener('click', function() {
	console.log('γαλάζιο - βύθιση');
}, true);
elem2.addEventListener('click', function() {
	console.log('γαλάζιο - αναδυόμενο');
}, false);

elem3.addEventListener('click', function() {
	console.log('κόκκινο - βύθιση');
}, true);
elem3.addEventListener('click', function() {
	console.log('κόκκινο - αναδυόμενο');
}, false);

Μπορείτε να ελέγξετε: