JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js"></script>
<script src="http://kaleb.horns.by/jquery-splendid-textchange/jquery.splendid.textchange.js"></script>
<label><input type="checkbox" name="checkbox" /> checkbox</label>
<div>
    <input type="radio" name="radio" value="a" />
    <input type="radio" name="radio" value="b" />
    radio
</div>
<label><input type="file" name="file" /> file</label>
<label><input type="text" name="text" data-bind="value: text,
valueUpdate: update" /> text</label>
<label><input type="search" name="search" /> search</label>
<label><input type="search" results="5" name="search2" /> search (with [results])</label>
<label><input type="number" name="number" /> number</label>
<label><input type="date" name="date" /> date</label>
<label><input type="month" name="month" /> month</label>
<label><input type="week" name="week" /> week</label>
<label><input type="time" name="time" /> time</label>
<label><input type="color" name="color" /> color</label>
<label>
    <select>
        <option>a</option>
        <option>b</option>
    </select>
    select
</label>
<label><textarea name="textarea"></textarea> textarea</label>

CSS

label{display:block;}

JavaScript

// Dev console should be open to view events
var valueUpdate = ['input', 'textchange'];
var events = [
    //'mouseover',
    //'mouseenter',
    'mousedown',
    'focus',
    'focusin:active',
    'focusout',
    'mouseup',
    'search',
    'click',
    'dblclick',
    //'mouseout',
    //'mouseleave',
    'select',
    'blur',
    'keydown',
    'keypress',
    'beforecut',
    'cut',
    'beforepaste',
    'paste',
    'textinput',
    'keyup',
    'change',
    'contextmenu',
    'propertychange',
    'wheel',
    'mousewheel',
    'activate',
    'deactivate',
    'beforeactivate',
    'beforedeactivate'
].concat(valueUpdate);
var eventObj = {};
$.each(events, function(i, e) {
    e = e.split(':');
    var eventName = e[0], group = e[1];
    eventObj[eventName] = function(e) {
        group = 'group' in console && group;
        if(group) {
            console.groupEnd();
            console.group(
                '%c%s %s ',
                'background:red;color:#ff0',
                this.name,
                group
            );
        }
        console.log(
            '%s %s (%s) %O',
            this.name,
            eventName,
            this.value,
            e
        );
        if(group === null) { console.groupEnd(); }
    };
});
$(':input').on(eventObj);
var self = { update: valueUpdate };
var vals = 'text textarea'.split(' ');
$.each(vals, function(i, val) {
    self[val] = ko.observable('');
    self[val].subscribe(function(value) {
      console.log(val + ' ko afterChange', value);
    });
});
ko.applyBindings(self);