How do I use a single event node to assign events to multiple children DOM elements?

Question

In my Google Closure code, I want to assign an event to every single span in a div.

HTML:

  <div id="container">
    <span>foo</span>
    <span>bar</span>
    <span>bacon is delicious</span>
  </div>

Closure Javascript:

  var container = goog.dom.getElement('container');
  var spans = goog.dom.getChildren(container);
  for (var i = 0; i < spans.length; i++) {
    eventHandler.listen(
        spans[i],
        goog.events.EventType.CLICK,
        function (e) {
          doSomeStuff(e.target);
        }
  }

This loop seems inefficient though because it seems to assign an event node to every single span element. Can I somehow assign a single event node to the containing div and have the callback function run when a click event on a span bubbles up to the containing div?

In jQuery, I believe the difference between the live() and delegate() functions parallels the issue I am dealing with here.

score 3 · Accepted Answer · answered Jul 26 '12 at 15:11

3

I never used Google Closure, but you are already using e.target. By just adding one listener to the container you can obtain the actually clicked element by using e.target.

var container = goog.dom.getElement('container');

eventHandler.listen(
    container,
    goog.events.EventType.CLICK,
    function (e) {
        doSomeStuff(e.target);
    });

answered Jul 26 '12 at 15:11

Prinzhorn

22,120
7
61
65

Thanks, wouldn't e.target return the containing div though? – dangerChihuahua007 Jul 26 '12 at 17:39
Did you test it? I'd be very surprised if Closure would change the meaning of target: https://developer.mozilla.org/en/DOM/event.target – Prinzhorn Jul 26 '12 at 17:58
e.target WILL return the containing div ONLY if you click on it, i.e. not on a child but on the space between the children. – Prinzhorn Jul 26 '12 at 18:00

How do I use a single event node to assign events to multiple children DOM elements?

1 Answers1