Ποια είναι η διαφορά μεταξύ event.preventDefault και event.stopPropagation;

event.preventDefault() ακυρώνει τη προεπιλεγμένη ενέργεια του προγράμματος περιήγησης για ένα γεγονός (π.χ., πλοήγηση κατά το κλικ σε <a>), και event.stopPropagation() σταματά την εξάπλωση ή το bubbling του γεγονότος στο DOM δέντρο, αποτρέποντας την κλήση των ίδιων χειριστών σε γονικά ή παιδικά στοιχεία.

Παράδειγμα:

// Υποθέτουμε ότι υπάρχει ένας σύνδεσμος μέσα σε ένα div
const link = document.querySelector('a');
const div = document.querySelector('div');

// Χειριστής κλικ στον σύνδεσμο
link.addEventListener('click', (event) => {
  alert('Κλικ στον σύνδεσμο');
  event.preventDefault(); // Ακυρώνει την πλοήγηση
});

// Χειριστής κλικ στο div
div.addEventListener('click', (event) => {
  alert('Κλικ στο div');
  // Χωρίς event.stopPropagation() αυτός ο χειριστής θα ενεργοποιηθεί μετά το κλικ στον σύνδεσμο
});

Αν προσθέσουμε event.stopPropagation() στον χειριστή του συνδέσμου:

// Χειριστής κλικ στον σύνδεσμο με διακοπή της εξάπλωσης
link.addEventListener('click', (event) => {
  alert('Κλικ στον σύνδεσμο');
  event.preventDefault();
  event.stopPropagation(); // Σταματά την εξάπλωση του γεγονότος στο div
});

// Χειριστής κλικ στο div
div.addEventListener('click', (event) => {
  alert('Κλικ στο div'); // Αυτό το alert δεν θα εμφανιστεί κατά το κλικ στον σύνδεσμο
});

Περίληψη πίνακα:

Μέθοδος	Ενέργεια	Επιρροή στη προεπιλεγμένη συμπεριφορά	Επιρροή στην εξάπλωση του γεγονότος
event.preventDefault()	Ακυρώνει την προεπιλεγμένη ενέργεια του προγράμματος περιήγησης	Ναι	Όχι
event.stopPropagation()	Σταματά την εξάπλωση/bubbling του γεγονότος	Όχι	Ναι