目标的Javascript事件委托问题

Question

I have this HTML (example):

<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>

And I have like, 1000 of the div.b . I need to add event listener to div.a and target the div.b children.

However the event.target may also be img , or 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
}

I need something like this (jQuery):

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

Answer 1

You can extend your query selector like in css file, to select the children of class.

The following code tested on clicking the search bar on SO. you can try it on console

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