if I delegate an event to an ancestor with something like
$("#container").on("click", ".distant_child", function(){
//...
}
when I look in the developer tools in Chrome to see what click events are bound, I only see #container's events. Is there any way to see what particular function is bound to a specific element?
Assuming I am not misunderstanding your question, as which specific element you mean is not clear, that delegated event is only bound to the #container element. The jQuery selector is run at event time to filter the bubbled-event elements.
Delegated events work by listening for events bubbling up to a non-changing ancestor element. It then applies the jQuery selector against the elements that caused the event to decide what elements to run the function against.
This delegation to an ancestor allows you to process events for elements that do not even exist at event registration time (a very useful thing).
Chrome will never see events on .distant-child elements as they have no event handler attached to them.
If you are looking for listing delegated events too, if these events are bound using jQuery, you could iterate through $._data events object of element itself and ancestors. eg:
var arrayEvents = [];
$('#child').parents().addBack().add(document).each(function () {
if (events = $._data(this, 'events')) {
for (event in events) {
for (var i = 0, z = events[event].length; i < z; i++)
if ($('#child').is(events[event][i].selector)) arrayEvents.push({
elem: this,
event: events[event][i].type
});
}
}
});
