example/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>🚌 triggerbus</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../triggerbus.umd.js"></script>
</head>
<body>
<h1>Example</h1>
<pre><code>
const bus = triggerbus()
bus.on('*', logger)
const off = bus.on('🎁', function(event, param) { output(event, 'Got myself a ' + param) })
bus.on('🎁', function(event, param) { output(event, 'But did I get a ' + param) })
bus.trigger('🎁', '🍕')
off()
bus.trigger('🎁', 'real 🍕')
bus.off('🎁')
bus.trigger('🎁', '🌯')
</code></pre>
<h2>Output</h2>
<output><pre><code data-target="output"></code></pre></output>
<h2>Wildcard logger</h2>
<output><pre><code data-target="logger"></code></pre></output>
<script>
const out = document.querySelector('[data-target="output"]')
const log = document.querySelector('[data-target="logger"]')
function output(event, data) {
out.appendChild(document.createTextNode(`${event}: ${data}`))
out.appendChild(document.createElement('br'))
}
function logger(event, data) {
log.appendChild(document.createTextNode(`${event}: ${data}`))
log.appendChild(document.createElement('br'))
}
const bus = triggerbus()
bus.on('*', logger)
const off = bus.on('🎁', function(event, param) { output(event, 'Got myself a ' + param) })
bus.on('🎁', function(event, param) { output(event, 'But did I get a ' + param) })
bus.trigger('🎁', '🍕')
off()
bus.trigger('🎁', 'real 🍕')
bus.off('🎁')
bus.trigger('🎁', '🌯')
// sad no pizza
</script>
</body>
</html>