javascript - Event delegation in jQuery, how to do it?

Question

In JavaScript i used to use event delegation like this :

someDiv.addEventListener('click', function(evt){
    if(evt.target.id == "#someChild"){
       // Do something..
    } else if(evt.target.id == "#anotherChild"){
       // Do something else..
    }
}, false);

What's the equivalent of this in jQuery? i know about .on() but how to use it in event delegation ? i mean is this how is it done :

someDiv.on('click, '#someChild, #anotherChild", function(evt){
      if($(this).is("#someChild")){ 
           // Do something..
      } else if($(this).is("#anotherChild")){
           // Do something else ..
      }      
});

But wouldn't it be just the same as in vanilla JavaScript ? I want to know if there's a better way to achieve it. And if this is the only way, what's the benefit of jQuery way over JS one ?

Answer 1

With jQuery you'd do it like this:

function onButtonClick(e) {
  //this = the button that was clicked

}

$(document.body).on('click','button',onButtonClick)

You can read the docs here