Gamepad event disptach

Gamepad events

// Accessing gamepads in the browser is a case of obtaining an array of gamepad "snapshots"
// in an event loop

function gamepads()
{
    var allGamepads = navigator.getGamepads();
    requestAnimationFrame(gamepads);
}

// Each time we get the gamepads collection we need to check each gamepad and each button to see if anything has changed
/// since the last time we checked (in the last tick).


// I want to add some custom events that I can trigger in my event loop (gamepads()) but I'm unsure what the EventTarget will be.
// Each time we call gamepads() we get a new collection of new gamepad snapshot objects for that tick.

// One option is to use something like `document` as the EventTarget for example:

var buttonZeroPress = new CustomEvent("buttonZeroPress", {
        detail : {
            time: new Date()
        },
        bubbles: true,
        cancelable: true
    });
    
document.addEventListener('buttonZeroPress', function (evt) {
        // Do stuff on screen
    });
    
// In the event loop we'll then dispatch the event with document
if(gamepad.buttons[i].pressed)
{
    document.dispatchEvent(buttonZeroPress);
}

// It seems a bit wrong to be dispatching the event on `document` when really it should be dispatched on
// the button press instance. Since the button instance is a different snapshot in each tick, i'm not sure
// that it would be possible to attach events to it.

// I'm open to ideas!

Thanks, Mark. Here's a video of the gamepad working: http://youtu.be/Y_jsQOcXAyQ in Chrome Canary on my PC.

Your suggestion of dispatching the events on a central object is probably the way I'll have to go. I was using document as an example but I should be able to send the [button] instance along with the event in order to read values from it.

Cheers!