Event model

UI events, example of keyup (see also: here… and there…)

class Shopping {
    …
    static _Handle(event) {
        window.console.log(`${event.key}` + ' <-event.key - event.code-> ' + `${event.code}`);
        …
    }
    …
}
window.addEventListener('keyup', Shopping._Handle);

Shopping.js.zip 

UI events, example of keyup cont'd

static _Handle(event) {
    window.console.log(`${event.key}` + ' <-event.key - event.code-> ' + `${event.code}`);
    if (event.defaultPrevented) window.console.log("'event.preventDefault()' already done..."); // By construction, propagation goes on...
    if (event.code === 'Backspace') Shopping._Buffer.pop();
    if (event.code === 'Escape' || event.code === 'Enter') {
        Shopping._Buffer.length = 0;
        if (window.confirm("Erase screen?")) Shopping._Query.innerHTML = "";
    }
    if (Shopping._Query_content.test(event.key) && event.key.length === 1) { // Test again regular expression...
        let last = Shopping._Buffer.pop();
        if (event.code === 'Space') {
            if (last !== undefined) {
                if (!last.includes(" ")) Shopping._Buffer.push(last); // Re-inject 'last' at last position
                Shopping._Buffer.push(event.key);
            }
        } else { // Something else that 'Space'...
            if (last === undefined) Shopping._Buffer.push(event.key);
            else {
                Shopping._Buffer.push(last); // Re-inject 'last' at last position
                Shopping._Buffer.push(event.key);
                if (!last.includes(" ")) Shopping._Search(Shopping._Buffer.join(''));
            }
        }
    }
}

Touch (see also: here… for real-time tests!)

User Interface (UI) events may depend upon browser/device capabilities like “touch”. Event subscription can then be guided by these capabilities.

/** https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events, compatibility: 'caniuse.com/#feat=pointer' */
// Chrome: 'chrome://flags' and Firefox: dom.w3c_pointer_events.enabled to 'true' in 'about:config' <- 'false' in old Firefox versions!
if (window.PointerEvent) { // Chrome v.76, Firefox v.68, but it does not work with Safari 12.1 (v.13 required)
    window.document.getElementById('NoLanguage').onpointerdown = NoLanguagePlayground.prototype.pointerdown.bind(this);
    window.document.getElementById('NoLanguage').onpointermove = NoLanguagePlayground.prototype.pointermove.bind(this);
    window.document.getElementById('NoLanguage').onpointerover = NoLanguagePlayground.prototype.pointerover.bind(this);
    window.document.getElementById('NoLanguage').onpointerup = NoLanguagePlayground.prototype.pointerup.bind(this);
} else {
// Note: 'window.navigator.maxTouchPoints === undefined' with Firefox on an ordinary desktop computer
// We must then test that the 'TouchEvent' API is enabled *AND* the device is really touch-based
    if ('ontouchstart' in window && window.navigator.maxTouchPoints > 0) {
        window.document.getElementById('NoLanguage').addEventListener('touchstart', NoLanguagePlayground.prototype.pointerdown.bind(this), false); /* Etc. */ }
    else { // Safari v12.1:
        window.document.getElementById('NoLanguage').addEventListener('mousedown', NoLanguagePlayground.prototype.pointerdown.bind(this), false); /* Etc. */ }
}

Shopping.js.zip 

© Franck Barbier