通过事件委派查找绑定到子级的功能

Question

如果我将事件委托给具有类似的祖先

$("#container").on("click", ".distant_child", function(){
    //...
}

当我在Chrome中的开发工具中查看绑定了哪些点击事件时，我只看到#container的事件。有没有什么方法可以看到什么特定的函数绑定到特定的元素？

Answer 1

假设我没有误解您的问题，因为您的意思是哪个特定元素不清楚，则委托事件仅绑定到#container元素。jQuery选择器在事件时运行，以过滤冒泡的事件元素。

委派的事件通过侦听冒泡到一个不变的祖先元素的事件来工作。它然后对导致事件的元素应用jQuery选择器，以决定对哪些元素运行函数。

这种对祖先的委派允许您处理在事件注册时甚至不存在的元素的事件（这是一件非常有用的事情）。

Chrome永远不会在.distant-child元素上看到事件，因为它们没有附加事件处理程序。

Answer 2

如果您也在寻找列出委托事件，如果这些事件是使用jQuery绑定的，那么您可以迭代元素本身和祖先的$._data事件对象。例如：

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

-演示-