Question

I am working with a HTML/jQuery page that somebody else wrote a while ago. For debugging I need to find all .blur() events that are triggered for any element on page load.

I can use the following to bind an event to all elements:

$("*").each(function() {
     $(this).blur(function() {
         alert(this);
     });
});

However this will not work (even if I could run it before the page loads), since the scripts on the page rebind .blur() events anyway.

Is there a way I can see what .blur() events are executed on page load? I thought I might be able to overwrite the .blur() internal jQuery function at run-time without this getting overwritten by blur event bindings but not sure if it’s possible.

Answer 1

Bind the blur event to document using .on('blur', '*', ...) (jQuery 1.7+):

$(document).on('blur', '*', function(e) {
    e.stopPropagation(); // Otherwise, many alerts will pop up for each event
    alert(this);
});

If you don’t have jQuery 1.7+, use delegate instead:

$(document).delegate('*', 'blur', function(e) {
    e.stopPropagation(); // Otherwise, many alerts will pop up for each event
    alert(this);
});