Τι είναι το γεγονός DOMContentLoaded;

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

Η κύρια διαφορά με την εκδήλωση load:

• DOMContentLoaded: Θα ενεργοποιηθεί όταν η δομή του DOM είναι έτοιμη.
• load: Θα ενεργοποιηθεί μόνο μετά τη πλήρη φόρτωση όλων των πόρων της σελίδας (εικόνες, CSS, scripts, αν δεν είναι async/defer).

Χρήση:

// Προσθέτουμε έναν ακροατή για το γεγονός DOMContentLoaded
document.addEventListener('DOMContentLoaded', () => {
  // Κώδικας που πρέπει να εκτελεστεί μετά τη πλήρη φόρτωση και ανάλυση του DOM
  console.log('Το DOM φορτώθηκε και αναλύθηκε πλήρως.');
});

Αυτό το γεγονός χρησιμοποιείται συχνά για την εκτέλεση JavaScript κώδικα που χειρίζεται το DOM, καθώς δεν είναι απαραίτητο να περιμένουμε τη φόρτωση όλων των εξωτερικών πόρων.