JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<div id="element"></div>
<div class="result"></div>

CSS

#element{
      width: 100%;
    height: 100px;
    background: #cccccc;
}
.result {}

JavaScript

$.fn.listHandlers = function(events, outputFunction) {
    return this.each(function(i){
        var elem = this,
            dEvents = $(this).data('events');
        if (!dEvents) {return;}
        $.each(dEvents, function(name, handler){
            if((new RegExp('^(' + (events === '*' ? '.+' : events.replace(',','|').replace(/^on/i,'')) + ')$' ,'i')).test(name)) {
               $.each(handler, function(i,handler){
                   outputFunction(elem, 'n' + i + ': [' + name + '] : ' + handler );
               });
           }
        });
    });
};

$('#element').listHandlers('*', console.info );

$( "#element" ).on( "*", function() { 
console.info
} );

$( "#element" ).one( "*", firstEvent);
 
function firstEvent( eventObject ) {
    console.log( "A " + eventObject.type + " event occurred for the first time on the input with id " + this.id );
}