Javascript/Jquery Single Event Target Delegation

I realized event.target redundancy could cause a lot of problems in the future when they are binded with another event in the next level. For example, when i have an Div element i

Solution 1:

You can prevent the event from bubbling using event.stopPropgation() like this:

$('div').bind('click', function(event){
  alert(event.target.id);
  event.stopPropagation();
});

You can give it a try here. This will "trap" the click on the first <div> that gets it, and won't let it propagate up to any parents.

Solution 2:

I think you just need to select the inside div in your bind call:

$('div:eq(0)').bind('click', function(event){
   alert(event.target.id)
}