Javascript 事件委托(delegate)问题与目标

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>

我有大约 1000 个 div.b。我需要将事件监听器添加到 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)
})