jQuery Custom Events

Custom events make it easy!

by Steven Senkus

HTML

<button type="button">Add</button>
<pre id="logArea">TEST AREA:</pre>

CSS

pre {
    height: 200px;
    width:300px;
    background-color: #007;
    color: #fff;
    padding: 20px;
    border: 8px double #eee;
    overflow-y: scroll;
    
     
    
}

button {
    background-color: #0f0;
    
}

JavaScript

var doc = $(document);
var logWin = $('pre');

$('button').on('mouseout', function(e) {
    doc.trigger('colorElem',['pre', '#070']);
    doc.trigger('logEvent',[e.type, '']);
})

$('button').on('mouseover', function (e) {
    //doc.trigger('askUser', [$(this)]);
    doc.trigger('colorElem', ['button', '#ff0']);
    doc.trigger('logEvent',[e.type, '']);
});

$('button').on('click', function(e) {
    doc.trigger('colorElem', ['button', '#f00']);
    doc.trigger('logEvent', [e.type, '']);
});

doc.on('askUser', function (e) {
    var response = prompt('Hello, World?');
    doc.trigger('tellUser', [response]);
    doc.trigger('logEvent',[e.type, '']);
});

doc.on('tellUser', function (e, message) {
    alert(message);
    doc.trigger('logEvent', [e.type, message]);
});

doc.on('colorElem', function(e, target, color) {
    $(target).css('background-color',color);
    doc.trigger('logEvent', [e.type, color])
});

doc.on('logEvent', function(e, eventCalled, message) {
    logWin.append('<br />' + eventCalled + ': ' + message);

});
doc.trigger('click');