Samples for my event constructor series article at www.justrog.com

readme.md

Samples for my event constructor series article at www.justrog.com

1. event_inspector.js - Simple native event objects fired from native event handlers

event_init_dictionaries.webidl

dictionary EventInit
{
    boolean bubbles = false;
    boolean cancelable = false;
};

dictionary UIEventInit : EventInit
{
    Window? view = null;
    long detail = 0;
};

dictionary SharedKeyboardAndMouseEventInit : UIEventInit
{
    boolean ctrlKey = false;
    boolean shiftKey = false;
    boolean altKey = false;
    boolean metaKey = false;
    boolean keyModifierStateAltGraph = false; // Interop: these changed names in a recent draft..
    boolean keyModifierStateCapsLock = false;
    boolean keyModifierStateFn = false;
    boolean keyModifierStateFnLock = false;
    boolean keyModifierStateHyper = false;
    boolean keyModifierStateNumLock = false;
    boolean keyModifierStateOS = false;
    boolean keyModifierStateScrollLock = false;
    boolean keyModifierStateSuper = false;
    boolean keyModifierStateSymbol = false;
    boolean keyModifierStateSymbolLock = false;
};

dictionary MouseEventInit : SharedKeyboardAndMouseEventInit
{
    long screenX = 0;
    long screenY = 0;
    long clientX = 0;
    long clientY = 0;
    short button = 0;
    unsigned short buttons = 0;
    EventTarget? relatedTarget = null;
};

event_init_method.js

var evt = document.createEvent("Event");
evt.initEvent("foo", false, false);

event_inspector.js

// http://jsfiddle.net/s1o8a335/
window.addEventListener("load", load_handler);
document.body.addEventListener("click", click_handler);

function load_handler(evt) {
    logEvent(evt);
    document.body.click();
}
function click_handler(evt) {
    logEvent(evt);
}
function logEvent(evt) {
    var output = document.getElementById("log");
    var logLines = [
        ["Event name", evt.type],
        ["InstanceOf Event", evt instanceof Event],
        ["InstanceOf UIEvent", evt instanceof UIEvent],
        ["InstanceOf MouseEvent", evt instanceof MouseEvent],
        ["toString", evt.toString()]
    ].map(function (arr) { return arr.join(": "); });
    output.innerHTML += logLines.join("<br>") + "<br><br>";
}

futures_extend_mouse_event.js

function SuperMouseEvent(type, dict) {
    var nativeEvt = new MouseEvent(type, dict);
    nativeEvt.__proto__ = SuperMouseEvent.prototype;
    return nativeEvt;
}
SuperMouseEvent.prototype = Object.create(MouseEvent.prototype);
SuperMouseEvent.prototype.constructor = SuperMouseEvent;

var mouseEvt = new MouseEvent("mousedown", { bubbles: true, detail: 1, view: window });
console.log(mouseEvt);

var obj = {};
var mouseEvtCpy = new SuperMouseEvent(mouseEvt.type, mouseEvt);
console.log(mouseEvtCpy instanceof SuperMouseEvent);
console.log(mouseEvtCpy instanceof MouseEvent);

mouse_init_constructors.js

var mouseEvt = new MouseEvent("mousedown", { bubbles: true, detail: 1, view: window });
console.log(mouseEvt);

var mouseEvtCpy = new MouseEvent(mouseEvt.type, mouseEvt);
console.log(mouseEvtCpy);

mouse_init_method.js

// Ermagod, I hope I managed to get all of these defaults right
var mouseEvt = document.createEvent("MouseEvent");
mouseEvt.initMouseEvent("mousedown", true, false, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
console.log(mouseEvt);

// Srysly, do Browser vendors hate authors this much?
var mouseEvtCpy = document.createEvent("MouseEvent");
mouseEvtCpy.initMouseEvent(mouseEvt.type, mouseEvt.bubbles, mouseEvt.cancelable, mouseEvt.view,
                           mouseEvt.detail, mouseEvt.screenX, mouseEvt.screenY, mouseEvt.clientX,
                           mouseEvt.clientY, mouseEvt.ctrlKey, mouseEvt.altKey, mouseEvt.shiftKey,
                           mouseEvt.metaKey, mouseEvt.button, mouseEvt.relatedTarget);
console.log(mouseEvtCpy);