目标发生Javascript事件委派问题

我有以下HTML（示例）：

我需要这样的东西（jQuery）：

---

您可以像在css文件中一样扩展查询选择器，以选择类的子类

下面的代码在单击SO上的搜索栏时进行了测试。你可以在控制台上试试

document.querySelector('.top-bar .f-input').addEventListener('click', function(e){
    console.log(e)
})

---

虽然尚未得到广泛支持，但MDN页面上也有一个polyfill。如果这是您的实际结构，请测试event.target是否为div.p，如果不是，请使用event.target.parentElement是的，但我正在寻找一个更灵活的解决方案，最佳做法是的，但这仅限于您有一个元素，如果您有多个元素（就像在我的例子中，我有数千个）您需要为每个节点添加一个事件侦听器，性能会很差

document.querySelector('.a').addEventListener('click', handler);

function handler(e){
   console.log(e.target); //either .b or img or p depending on where I click
}

$('.a').on('click', '.b', function(){
   //code
});

document.querySelector('.top-bar .f-input').addEventListener('click', function(e){
    console.log(e)
})