JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://flightjs.github.io/release/latest/flight.min.js"></script>
<input id="first" type="text"></input>
<div id="delegator">
    <input id="second" type="text"></input>
</div>
<div id="jquery-delegator">
    <input id="third" type="text"></input>
</div>
<hr/>
<div id="first-mouseover">On fragment mouseover <span>0</span></div>
<div id="second-mouseover">Flight delegation mouseover <span>0</span></div>
<div id="third-mouseover">jQuery delegation mouseover <span>0</span></div>
<hr/>
<div id="first-mouseenter">On fragment mouseenter <span>0</span></div>
<div id="second-mouseenter">Flight delegation  mouseenter <span>0</span></div>
<div id="third-mouseenter">jQuery delegation mouseenter <span>0</span></div>

JavaScript

var counts = {
    '#first-mouseover': 0,
    '#second-mouseover': 0,
    '#third-mouseover': 0,
    '#first-mouseenter': 0,
    '#second-mouseenter': 0,
    '#third-mouseenter': 0
};

function mouseenterCount () {
    var id = $(this).attr('id');
    var key = '#' + id + '-mouseenter';
    var count = counts[key] + 1;
    
    counts[key] = count;
    
    $(key).find('span').text(count);
}

function mouseoverCount () {
    var id = $(this).attr('id');
    var key = '#' + id + '-mouseover';
    var count = counts[key] + 1;
    
    counts[key] = count;
    $(key).find('span').text(count);

}

var delegatorComponent = flight.component(function () {
    this.attributes({
        inputSelector: 'input'
    });
    this.mouseenterCount = function (e) {
        var id = $(e.target).attr('id');
        var key = '#' + id + '-mouseenter';
        var count = counts[key] + 1;
        
        counts[key] = count;
        
        $(key).find('span').text(count);
    };
    this.mouseoverCount = function (e) {
        var id = $(e.target).attr('id');
        var key = '#' + id + '-mouseover';
        var count = counts[key] + 1;
        
        counts[key] = count;
        $(key).find('span').text(count);
    
    };
    this.after('initialize', function () {
        this.on('mouseover', {
            inputSelector: this.mouseenterCount
        });
        this.on('mouseenter', {
            inputSelector: this.mouseoverCount
        });
    });
});
delegatorComponent.attachTo('#delegator');

$('#first').on('mouseenter', mouseenterCount);
$('#first').on('mouseover', mouseoverCount);

$('#jquery-delegator').on('mouseenter', 'input', mouseenterCount);
$('#jquery-delegator').on('mouseover', 'input', mouseoverCount);