JSFiddle - React, Tailwind, and code Playground

by Hui Zheng

HTML

<h3>How array values are passed to event handlers</h3>
<table>
    <tr>
        <th>Handler Type</th>
        <th>UI Parameter Value</th>
        <th>Extra Parameter Value</th>
    </tr>
</table>

CSS

th {
    font-weight: bold;
}

td, th {
    padding: 5px;   
    border: 1px solid black;
}

JavaScript

$.widget( "ui.testWidget", {
    _create: function() {},
    testEvent: function() {
        var ui = {
            foo: 1
        };
        var extra = {
            bar: 2
        };
        this._trigger( "foo", 0, [ui, extra] );
    }
});
function handler( type ) {
    return function( event, ui, extra ) {
        var $type = $('<td>').html(type),
            $ui = $('<td>').html(JSON.stringify(ui)),
            $extra = $('<td>').html(JSON.stringify(extra));
        $('<tr>').append($type).append($ui).append($extra).appendTo(this);
    };
};

$( "table" ).bind( "testwidgetfoo", handler('bind'));
$( "table" ).testWidget({
    foo: handler('callback')
}).testWidget( "testEvent" );