jQueryGlobalEventListeners

jQuery global event listeners

by CommandLineDesign

HTML

<div>
    <input id="messageHolder" type="text" placeholder="Click this to tab to buttons to test Enter key" tabindex="1">
    <br>
    <button id="Button1" class="enterAction perform-testAlert">Enter Key Only</button>
    <button id="Button2" class="submitAction perform-testAlert">Click or Enter Key</button>
    <button id="Button3" class="clickAction perform-testAlert">Click Only</button>
</div>

CSS

div {
    display: inline-block;
    position: relative;
    left: 20px;
    top: 20px;
}
input {
    width: 96%
}
button, input {
    border: 2px solid gray;
    padding: 3px;
    margin: 5px 1px 3px 0px;
}
button:focus, input:focus {
    border: 2px solid rgba(81, 203, 238, 1);
}
.Button1 {
    border: 2px solid blue;
}
.Button2 {
    border: 2px solid red;
}
.Button3 {
    border: 2px solid green;
}

JavaScript

// ::::::::::::::::::::::::::::::::::::::::::::::::::::: Output Message To user :::::::::::::::::::::::::::::::::::::::::::::::::::::
//Globally define the messages to display
var flavorText = {
    'enterAction': 'Enter Key Only',
        'clickAction': 'Mouse click Only',
        'submitAction': 'Click or Enter Key'
};
//Display the message to the user
function testAlert(eventObject) {
    var messageToDisplay = '';
    var actionKeywords = ['enterAction', 'submitAction', 'clickAction'];
    for (var i = 0; i < actionKeywords.length; i++) {
        var thisKeyword = actionKeywords[i];
        for (var i2 = 0; i2 < eventObject.target.classList.length; i2++) {
            if (thisKeyword == eventObject.target.classList[i2]) {
                messageToDisplay = flavorText[thisKeyword] + ' (' + thisKeyword + '): ' + eventObject.target.id;
            }
        }
    }
    if (messageToDisplay) {
        $('#messageHolder').attr('class', eventObject.target.id);
        $('#messageHolder').attr('placeholder', messageToDisplay);
    }
}
// ::::::::::::::::::::::::::::::::::::::::::::::::::::: Global event Listeners :::::::::::::::::::::::::::::::::::::::::::::::::::::
//Capture Function from Class and execute
function handleAction(eventObject) {
    eventObject.preventDefault();
    var pattern = new RegExp('perform-');
    for (var i = 0; i < eventObject.target.classList.length; i++) {
        thisClass = eventObject.target.classList[i];
        if (pattern.test(thisClass)) {
            var methodName = thisClass.split('-')[1];
            window[methodName](eventObject);
        }
    }
    return false;
}
//submitAction captures both click, and enter events
$(document).on('keydown click', '.submitAction', function (event) {
    //This prevents the fake click event that follows enter key events
    if ((event.type == 'click' && (event.pageX !== 0 && event.pageY !== 0)) || (event.type == 'keydown' && event.keyCode == 13)) {
        handleAction(event);
   ...