Έχω μια σελίδα όπου ορισμένοι ακροατές συμβάντων είναι συνδεδεμένοι με πλαίσια εισαγωγής και πλαίσια επιλογής. Υπάρχει τρόπος να μάθω ποιοι ακροατές συμβάντων παρατηρούν έναν συγκεκριμένο κόμβο DOM και για ποιο συμβάν;
Τα συμβάντα συνδέονται με τη χρήση:
Event.observe
,addEventListener
,element.onclick
.Αν θέλετε απλώς να επιθεωρήσετε τι συμβαίνει σε μια σελίδα, μπορείτε να δοκιμάσετε το σελιδοδείκτη 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!') }",
})
1.4.x (αποθηκεύει τον χειριστή μέσα σε ένα αντικείμενο)
// επιθεώρηση
var clickEvents = $(element).data("events").click,
jQuery.each(clickEvents, function(key, handlerObj) {
alert(handlerObj.handler) // alerts "function() { alert('clicked!') }",
// επίσης διαθέσιμα: handlerObj.type, handlerObj.namespace
})
(Βλέπε jQuery.fn.data
και jQuery.data
)</sup>,
Μέθοδος D): Prototype (messy)
$(element).observe('click', handler);
1.5.x
// inspect
Event.observers.each(function(item) {
if(item[0] == element) {
alert(item[2]) // ειδοποιήσεις "function() { alert('clicked!') }",
}
})
1.6 έως 1.6.0.3, συμπεριλαμβανομένων (δυσκολεύτηκε πολύ εδώ)
// inspect. "_eventId" is for < 1.6.0.3 while
// "_prototypeEventID" εισήχθη στην 1.6.0.3.
var clickEvents = Event.cache[element._eventId || (element._prototypeEventID || [])[0]].click,
clickEvents.each(function(wrapper){
alert(wrapper.handler) // ειδοποιήσεις "function() { alert('clicked!') }",
})
1.6.1 (λίγο καλύτερα)
// inspect
var clickEvents = element.getStorage().get('prototype_event_registry').get('click'),
clickEvents.each(function(wrapper){
alert(wrapper.handler) // ειδοποιήσεις "function() { alert('clicked!') }",
})
Αν έχετε Firebug, μπορείτε να χρησιμοποιήσετε την εντολή console.dir(object or array)
για να εκτυπώσετε ένα ωραίο δέντρο στο αρχείο καταγραφής της κονσόλας οποιουδήποτε κλιμακωτού, πίνακα ή αντικειμένου JavaScript.
Δοκιμάστε:
console.dir(clickEvents);
ή
console.dir(window);