JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<button id="click">Click Me</button>
<hr />
Type a namespace to try custom values:<br>
<input id="str" type="text" value=".monkey" /> <button id="try">Try Namespace</button>
<h1>Log</h1>
<div id="log"></div>

CSS

body { font-family: Arial; line-height: 1.4em;  }
#log { padding-left: 1em; }
h2 { font-size: 16px; margin: .25em 0 0 -1em; }

JavaScript

var $b = $('button#click'),
    $l = $('#log'),
    $t = $('#try'),
    $n = $('#str');

$b
.on('click', function(e){ !e.isTrigger && $l.append('<h2>native click</h2>'); console.log(e); })
.on('click', function(){ $l.append('click<br>'); })
.on('click.com', function(){ $l.append('click.com<br>'); })
.on('click.com.button', function(){ $l.append('click.com.button<br>'); })
.on('click.com.button.data', function(){ $l.append('click.com.button.data<br>'); })
.on('click.com.google', function(){ $l.append('click.com.google<br>'); })
.on('click.button', function(){ $l.append('click.button<br>'); })
.on('click.data', function(){ $l.append('click.data<br>'); })
.on('click.com.data.monkey', function(){ $l.append('click.com.data.monkey<br>'); })
.on('click.data.monkey', function(){ $l.append('click.data.monkey<br>'); });

$l.append('<h2>click.com</h2>');
$b.trigger('click.com');

$l.append('<h2>click.com.button</h2>');
$b.trigger('click.com.button');

$l.append('<h2>click.data</h2>');
$b.trigger('click.data');

$l.append('<h2>click.data.button</h2>');
$b.trigger('click.data.button');

$l.append('<h2>click!</h2>');
$b.trigger('click!');

$t.on('click', function(){
    var action = 'click' + $n.val();
    $l.append('<h2>' + action + '</h2>');
    $b.trigger(action);
});