JSFiddle - React, Tailwind, and code Playground

by guest271314

HTML

<select>
    <option>select</option>
    <option value="testEventOne">testEventOne</option>
    <option value="testEventTwo">testEventTwo</option>
    <option value="testEventThree">testEventThree</option>
    <option value="testEventFour">testEventFour</option>
    <option value="testEventFive">testEventFive</option>
</select>
<div id="log"></div>

JavaScript

var types = ["testEventOne", "testEventTwo"
              , "testEventThree", "testEventFour", "testEventFive"];

var events = function(evt, ns) {
    return $.map(evt, function(v, k) {
      return v + ns
    })
};

var ns = ".event_namespace", log = [];

$(window).on(events(types, ns).join(" "), function(e) {
    console.log(e.type, e.namespace);
});

$("select").on("change", function(e) {
  $(window).trigger(e.target.value + ns)
});

$(window, document, "*").on("event", function(e, ns, type) {
    log.push([ns, type]);
    $("#log").html("type, namespace: " + log.slice(-1)
                   + "<br> total <i>" + ns + "</i> events: " 
                   + log.length)
})

$.each([window, document, $("*")], function(k, v) {
    if($._data(v, "events") !== undefined) {
        $.each($._data(v, "events"), function(key, val) {
            if (val[0].namespace === ns.slice(- (ns.length -1))) {
                $(v).on(key + ns, function(e) {
                     $(e.target).trigger("event", [e.namespace, e.type])
                })
            }
        })
    }
})