manual DOM events

HTML

<div> <span>Here's a Div<span> </div>

CSS

div {
    width: 300px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    background: red;
}

JavaScript

if (!window.CustomEvent) { /* IE 9 & 10 Pollyfill */ 
    function CustomEvent ( event, params ) {
        params = params || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent( 'CustomEvent' );
        evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
        return evt;
    };
    CustomEvent.prototype = window.Event.prototype;
    window.CustomEvent = CustomEvent;
}

var div = document.getElementsByTagName('div')[0];

function eventOpts(data) { return {
    bubbles: true,
    cancelable: true,
    detail: {data:data}
};}

function handler(e) {
    alert(e.type);
    console.dir(e);
}

div.addEventListener('genericEv', handler);
div.addEventListener('customEv', handler);
div.addEventListener('click', handler);

var genericEvent = new Event('genericEv', eventOpts('generic data'));
var customEvent = new CustomEvent('customEv', eventOpts('custom data'));
var clickEvent = new MouseEvent('click', eventOpts('click data'));

if (!div.dispatchEvent(genericEvent)) alert("preventDefault canceled event");
if (!div.dispatchEvent(customEvent)) alert("preventDefault canceled event");
if (!div.dispatchEvent(clickEvent)) alert("preventDefault canceled event");