Closure event delegation - event listener on DOM parent that covers children/descendants of a given class

Viewed 1756

In jQuery, you can do the following:

$('#j_unoffered').on('click', '.icon_del', function () {...

This puts one handler on the element j_unoffered that fires if any descendant element with class icon_del is clicked. It applies, furthermore, to any subsequently created icon_del element.

I can get this working fine in Closure where the click is on the element itself.

goog.events.listen(
    goog.dom.getElement('j_unoffered'),  
    goog.events.EventType.CLICK,
    function(e) {...

How can I specify a parent event target in Closure that works for its children/descendants in the same way as the jQuery example?

I'm assuming I need to use setParentEventTarget somehow, but I'm not sure how to implement it for DOM events. Most of the documentation I've found pertains to custom dispatch events.

-- UPDATE --

I'm wondering if there is anything wrong with this rather simple solution:

goog.events.listen(
    goog.dom.getElement('j_unoffered'),  
    goog.events.EventType.CLICK,
    function(e) {
        if (e.target.className.indexOf('icon_del') !== -1) {...

It still leaves this bound to the parent, but e.target allows a work-around. The fifth argument in listen (opt_handler) allows you to bind this to something else, so I guess that's an avenue, too.

2 Answers
Related