How event bubbling works ?

index.css

.parent{
    min-height: 400px;
    min-width : 400px;
    background-color:yellow;
}

.parent .son{
    min-height: 100px;
    min-width : 100px;
    background-color:red;
}

.parent .daughter{
    margin-top : 100px;
    min-height: 100px;
    min-width : 100px;
    background-color:green;
}

index.html

<div class="parent">
   <div class="child son">
   </div>
  
   <div class="child daughter">
   </div> 
</div>

index.js

$(document).ready(function(event){

   $(".parent").on("click",".son",function(event){
         console.log("event.target",event.target);
         console.log("this",this);
   });

   $(".parent").on("click",function(event){
        
         if( event.target === this ){
             console.log("Event directly on parent");
         }
     
         console.log("event.target",event.target);
         console.log("this",this);
   });

});