javascript - 闭包事件委托(delegate) - DOM 父级上的事件监听器，涵盖给定类的子级/后代

Question

在 jQuery 中，您可以执行以下操作:

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

这会在元素 j_unoffered 上放置一个处理程序，如果单击具有类 icon_del 的任何后代元素，该处理程序就会触发。此外，它适用于任何随后创建的 icon_del 元素。

我可以在点击元素本身的 Closure 中正常工作。

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

如何在 Closure 中指定父事件目标，以与 jQuery 示例相同的方式为其子/后代工作？

我假设我需要以某种方式使用 setParentEventTarget，但我不确定如何为 DOM 事件实现它。我找到的大部分文档都与自定义调度事件有关。

-- 更新--

我想知道这个相当简单的解决方案是否有任何问题:

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

它仍然将 this 绑定(bind)到父级，但 e.target 允许变通。 listen (opt_handler) 中的第五个参数允许您将 this 绑定(bind)到其他东西，所以我想这也是一个途径。

Answer 1

我也不知道这种可能性，所以我建议其他一段代码:

var addHandler = function(containerSelector, eventType, nestSelector, handler) {
    var parent = goog.isString(containerSelector) ? 
                 document.querySelector(containerSelector) :
                 containerSelector;

    return goog.events.listen(
        parent,
        eventType,
        function(e) {

            var children = parent.querySelectorAll(nestSelector);
            var needChild = goog.array.find(children, function(child) {
                return goog.dom.contains(child, e.target);
            });

            if (needChild)
                handler.call(needChild, e);                

        });
});

用法:

addHandler('#elem', goog.events.EventType.CLICK, '.sub-class', function(e) {
    console.log(e.target);
});

更新:

如果您将使用此 e.target.className.indexOf('icon_del')，则可能会错过正确的事件。考虑一个 id = container 的容器 div，它有几个类为 innerContainer 的 div，每个 div 都包含几个类为 finalDiv 的 div >。并考虑您将使用上面的代码添加事件处理程序，这将检查 e.target 中的 innerContainer 类。问题是当用户单击 finalDiv 时，您的处理程序将被调用，但事件目标将是 finalDiv，它不是 innerContainer，而是包含在其中。你的代码会错过它，但它不应该。我的代码检查 e.target 是否有嵌套类或包含在其中，因此您不会错过此类事件。

opt_handler 也不能真正帮助你，因为可能有很多嵌套元素你想处理(你会把其中的哪些传递到这里？也许全部，但不是很有帮助，你可以得到它们随时都在事件处理程序中)，而且它们可以在之后动态添加，因此当您添加处理程序时您无法知道它们。

总之，我认为在事件处理程序中做这样的工作是合理且最有效的。