目标的Javascript事件委托问题

Question

我有这个HTML（示例）：

<div class="a">
  <div class="b">
    <img src="...">
    <p>text</p>
  </div>
  <div class="b">
    <img src="...">
    <p>text</p>
  </div>
  <div class="b">
    <img src="...">
    <p>text</p>
  </div>
</div>

我喜欢div.b 1000。 我需要将事件侦听器添加到div.a并定位div.b子级。

但是event.target也可以是img或p ：

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

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

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

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

Answer 1

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

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

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