Creating And Triggering Custom Event Using JQuery

Code snippets to create And trigger custom event using JQuery.

JavaScript

$(document).ready(function() {
    // create and trigger onkeydown events
    $(this).bind("OnUpArrowKeyDown", onUpArrowKeyDownEventHandler);
    var upArrowKeyEvent = jQuery.Event("OnUpArrowKeyDown", {keyCode: 38});
    $(this).trigger(upArrowKeyEvent);

    function onUpArrowKeyDownEventHandler(event) {
        console.log("onUpArrowKeyDownEventHandler");
        console.log(event);
    }
    
    // create and trigger event without params
    $(this).bind("CustomEventWithNoParam", eventHandlerWithNoParam);
    var customEventWithNoParam = jQuery.Event("CustomEventWithNoParam");
    $(this).trigger(customEventWithNoParam);

    function eventHandlerWithNoParam() {
        console.log("Called customEventHandlerWithNoParam()");
    }

    // create and trigger custom event with params
    $(this).bind("CustomEventWithParam", eventHandlerWithParam);
    var customEventWithParam = jQuery.Event("CustomEventWithParam", {
        var1: "val1",
        var2: "val2",
    });
    var customEventParam = {
        var3: "val3",
        var4: "val4"
    };
    $(this).trigger(customEventWithParam, customEventParam);

    function eventHandlerWithParam(event, param) {
        console.log("Called eventHandlerWithParam()");
        console.log(event);
        console.log(param);
    }
});