Πώς να βρείτε ακροατές συμβάντων σε έναν κόμβο DOM κατά την αποσφαλμάτωση ή από τον κώδικα JavaScript;

Αν θέλετε απλώς να επιθεωρήσετε τι συμβαίνει σε μια σελίδα, μπορείτε να δοκιμάσετε το σελιδοδείκτη Visual Event.

Επικαιροποίηση: Visual Event 2 διαθέσιμο,

Εξαρτάται από τον τρόπο με τον οποίο συνδέονται τα συμβάντα. Για παράδειγμα, ας υποθέσουμε ότι έχουμε τον ακόλουθο χειριστή κλικ:

var handler = function() { alert('clicked!') };

Θα τον επισυνάψουμε στο στοιχείο μας χρησιμοποιώντας διαφορετικές μεθόδους, κάποιες από τις οποίες επιτρέπουν την επιθεώρηση και κάποιες άλλες όχι.

Μέθοδος Α) μεμονωμένος χειριστής συμβάντος

element.onclick = handler;
// inspect
alert(element.onclick); // alerts "function() { alert('clicked!') }"

Μέθοδος Β) πολλαπλοί χειριστές συμβάντων

if(element.addEventListener) { // DOM standard
    element.addEventListener('click', handler, false)
} else if(element.attachEvent) { // IE
    element.attachEvent('onclick', handler)
}
// cannot inspect element to find handlers

Μέθοδος Γ): jQuery

$(element).click(handler);

• 1.3.x

   // inspect
   var clickEvents = $(element).data("events").click,
   jQuery.each(clickEvents, function(key, value) {
       alert(value) // ειδοποιήσεις "function() { alert('clicked!') }&quot,
   })

• 1.4.x (αποθηκεύει τον χειριστή μέσα σε ένα αντικείμενο)

   // επιθεώρηση
   var clickEvents = $(element).data("events").click,
   jQuery.each(clickEvents, function(key, handlerObj) {
       alert(handlerObj.handler) // alerts "function() { alert('clicked!') }&quot,
       // επίσης διαθέσιμα: handlerObj.type, handlerObj.namespace
   })

(Βλέπε [jQuery.fn.data][1] και [jQuery.data][2])

Αν έχετε Firebug, μπορείτε να χρησιμοποιήσετε την εντολή console.dir(object or array) για να εκτυπώσετε ένα ωραίο δέντρο στο αρχείο καταγραφής της κονσόλας οποιουδήποτε κλιμακωτού, πίνακα ή αντικειμένου JavaScript.

Δοκιμάστε:

console.dir(clickEvents);

ή

console.dir(window);