JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
    <button id="btn1">div 1 trigger customEvent 1</button>
    <button id="btn2">div 1 trigger customEvent 2</button>
    <button id="btn3">div 2 trigger customEvent 1</button>
    <button id="btn4">div 2 trigger customEvent 2</button>
</body>
</html>

JavaScript

$('#div1').bind('customEvent1 customEvent2', function(e){
    alert('div1 '+e.type);
    $(this).find('#div2').trigger(e.type);
});
$('#div2').bind('customEvent2', function(e){
    e.stopPropagation();
    alert('div2 '+e.type);
}).bind('customEvent1', function(e){
    e.stopPropagation();
});


$('#btn1').bind('click', function(){
    $('#div1').trigger('customEvent1');
});
$('#btn2').bind('click', function(){
    $('#div1').trigger('customEvent2');
});
$('#btn3').bind('click', function(){
    $('#div2').trigger('customEvent1');
});
$('#btn4').bind('click', function(){
    $('#div2').trigger('customEvent2');
});