如何使用单个事件节点将事件分配给多个子 DOM 元素？答案

【问题标题】：How do I use a single event node to assign events to multiple children DOM elements?如何使用单个事件节点将事件分配给多个子 DOM 元素？
【发布时间】：2012-07-26 15:02:11
【问题描述】：

在我的 Google Closure 代码中，我想为 div 中的每个 span 分配一个事件。

HTML：

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

关闭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);
        }
  }

这个循环似乎效率低下，因为它似乎为每个跨度元素分配了一个事件节点。我可以以某种方式将单个事件节点分配给包含 div，并在跨度上的单击事件冒泡到包含 div 时运行回调函数吗？

在 jQuery 中，我相信 live() 和 delegate() 函数之间的区别与我在这里处理的问题相似。

【问题讨论】：

标签： google-closure google-closure-library

【解决方案1】：

我从未使用过 Google Closure，但您已经在使用 e.target。只需在容器中添加一个侦听器，就可以使用e.target 获取实际点击的元素。

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

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

【讨论】：

谢谢，e.target 不会返回包含的 div 吗？
你测试了吗？如果 Closure 会改变目标的含义，我会感到非常惊讶：developer.mozilla.org/en/DOM/event.target
e.target 只有在你点击它时才会返回包含的 div，即不是在孩子上，而是在孩子之间的空间上。