Custom Async Events in JS?

$(function() {
    var jqOutput      = $('#jq-output');
    var oNativeOutput = $('#native-output');

    // --------------------------------------------------
    // define 3 handlers for the custom events
    // --------------------------------------------------
    function jqEventHandler1() {
        jqOutput.append('<p>jq handler 1</p>');
    }

    function jqEventHandler2() {
        jqOutput.append('<p>jq handler 2</p>');
    }

    function jqEventHandler3() {
        jqOutput.append('<p>jq handler 3</p>');
    }

    // Use jQuery to setup some custom events
    $('body').bind('jq-event', jqEventHandler1);
    $('body').bind('jq-event', jqEventHandler2);
    $('body').bind('jq-event', jqEventHandler3);

    // trigger the custom event
    $('#fire-jq').click(function() {
        $('body').trigger('jq-event');
        return false;
    });


    // now we'll try using the native custom events
    document.addEventListener('custom', jqEventHandler1, false);
    document.addEventListener('custom', jqEventHandler2, false);
    document.addEventListener('custom', jqEventHandler3, false);

    document.getElementById('fire-native').addEventListener('click', function(oEvent) {
        oEvent.stopPropagation();
        oEvent.preventDefault();

        // create the event
        var evt = document.createEvent('Event');
        // define that the event name is `custom`
        evt.initEvent('custom', true, true);

        // elem is any element
        document.getElementsByTagName('body')[0].dispatchEvent(evt);
    });
});