JavaScript: Events, 10–17

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53const target = el('button', { id: 'target', type: 'button' }, 'Click me');
document.body.appendChild(target);

const log = [];
let renames = 0;

target.addEventListener('click', () => log.push('click'));
target.addEventListener('dblclick', () => { log.push('dblclick'); renames++; });

// A real double click sends click, click, dblclick — in that order.
const doubleClick = () => {
  fire(target, 'click');
  fire(target, 'click');
  fire(target, 'dblclick');
};

fire(target, 'click');
console.log('one click :', log);

log.length = 0;
doubleClick();
console.log('double    :', log, '<- click fired twice BEFORE dblclick');

// If a single click does something visible, this is the fix: wait long enough to
// know a second click is not coming.
const clocked = [];
let pending = null;
const smart = {
  click() {
    clearTimeoutStub(pending);
    pending = setTimeoutStub(() => clocked.push('single'), 250);
  },
  dblclick() {
    clearTimeoutStub(pending);            // cancel the pending single
    clocked.push('double');
  },
};
// A tiny injected clock, so the wait costs nothing.
let now = 0;
let jobs = [];
let nextId = 1;
function setTimeoutStub(fn, ms) { const id = nextId++; jobs.push({ id, fn, at: now + ms }); return id; }
function clearTimeoutStub(id) { jobs = jobs.filter((j) => j.id !== id); }
function advance(ms) {
  now += ms;
  const due = jobs.filter((j) => j.at <= now);
  jobs = jobs.filter((j) => j.at > now);
  for (const j of due) j.fn();
}

smart.click(); advance(300);
smart.click(); smart.click(); smart.dblclick(); advance(300);
console.log('with a delay:', clocked, '<- one single, one double, no false single');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38const list = el('ul', { id: 'list' }, [
  el('li', {}, ['Ojota ', el('b', {}, 'hub')]),      // has a nested element
  el('li', {}, 'Berger'),
]);
document.body.appendChild(list);

const clicks = [];
let listeners = 1;                       // exactly one, for the whole list

// One listener on the parent. Children's clicks bubble up to it, so items added
// later are handled with no extra work.
list.addEventListener('click', (event) => {
  // target may be the <b> inside the item, so walk up to the item itself.
  const item = event.target.closest('li');
  if (!item || !list.contains(item)) return;
  clicks.push({ text: item.textContent.trim(), hit: event.target.tagName });
});

const addItem = (text) => {
  const li = el('li', {}, text);
  list.appendChild(li);                   // no listener attached to it
  return li;
};

fire(list.children[1], 'click');
console.log('clicked an existing item:', clicks.at(-1));

// Clicking the nested <b> inside the first item.
fire(list.children[0].querySelector('b'), 'click');
console.log('clicked a nested element:', clicks.at(-1), '<- closest() found the li');

const added = addItem('Ibadan');
fire(added, 'click');
console.log('clicked an item added later:', clicks.at(-1), '<- still handled');

// Clicking the list itself, but not an item.
fire(list, 'click');
console.log('clicked the list background: entries still', clicks.length);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33const form = el('form', { id: 'form' }, [
  el('input', { name: 'from', value: 'Ojota' }),
  el('input', { name: 'to', value: 'Abuja' }),
  el('input', { name: 'seats', type: 'number', value: '2' }),
  el('button', { type: 'submit' }, 'Submit'),
]);
document.body.appendChild(form);

const logged = [];

// submit on the FORM, not click on the button: pressing Enter in a text field
// submits as well, and a click listener would miss it entirely.
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const data = {};
  for (const field of event.target.elements) {
    if (!field.name) continue;                 // the submit button has no name
    data[field.name] = field.value;            // always a string
  }
  logged.push(data);
});

const event = new Event('submit', { bubbles: true, cancelable: true });
form.dispatchEvent(event);

console.log('default prevented:', event.defaultPrevented);
console.log('values logged    :', logged[0]);
console.log('seats is a', typeof logged[0].seats, 'not a number');

// preventDefault only works on a cancelable event.
const notCancelable = new Event('submit', { bubbles: true, cancelable: false });
notCancelable.preventDefault();
console.log('preventDefault on a non-cancelable event:', notCancelable.defaultPrevented);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39const child = el('button', { id: 'child', type: 'button' }, 'child');
const parent = el('div', { id: 'parent' }, ['parent', child]);
const grandparent = el('div', { id: 'grandparent' }, ['grandparent', parent]);
document.body.appendChild(grandparent);

let log = [];
let stopAtParent = false;

child.addEventListener('click', () => log.push('child'));
parent.addEventListener('click', (event) => {
  log.push('parent');
  if (stopAtParent) event.stopPropagation();
});
parent.addEventListener('click', () => log.push('parent, second listener'));
grandparent.addEventListener('click', () => log.push('grandparent'));
document.body.addEventListener('click', () => log.push('body'));

const clickChild = () => { log = []; fire(child, 'click'); return log; };

console.log('bubbling all the way :', clickChild());
stopAtParent = true;
const stopped = clickChild();
console.log('stopped at the parent:', stopped);
console.log('<- note the second listener on the parent STILL ran');

// stopImmediatePropagation also stops the siblings on the same element.
stopAtParent = false;
const immediateLog = [];
const hard = el('button', { type: 'button' }, 'hard stop');
const hardWrap = el('div', {}, hard);
document.body.appendChild(hardWrap);
hard.addEventListener('click', (e) => { immediateLog.push('first'); e.stopImmediatePropagation(); });
hard.addEventListener('click', () => immediateLog.push('second'));
hardWrap.addEventListener('click', () => immediateLog.push('wrapper'));
fire(hard, 'click');
// Snapshotted now: later assertions fire more clicks, and this claim is about
// this one click.
const immediate = [...immediateLog];
console.log('stopImmediatePropagation:', immediate, '<- the second listener never ran');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31const target = el('button', { id: 'target', type: 'button' }, 'target');
const inner = el('div', { id: 'inner' }, ['inner', target]);
const outer = el('div', { id: 'outer' }, ['outer', inner]);
document.body.appendChild(outer);

const log = [];

// The third argument, true, means "capture": run on the way DOWN.
outer.addEventListener('click', () => log.push('outer capture'), true);
inner.addEventListener('click', () => log.push('inner capture'), true);

// On the target itself both are registered, and they run in the order added.
target.addEventListener('click', () => log.push('target capture'), true);
target.addEventListener('click', () => log.push('target bubble'));

// No third argument means bubble: run on the way back UP.
inner.addEventListener('click', () => log.push('inner bubble'));
outer.addEventListener('click', () => log.push('outer bubble'));

fire(target, 'click');
for (const line of log) console.log(line);

// A capture listener can stop the event before the target ever sees it.
const blocked = [];
const b = el('button', { type: 'button' }, 'blocked');
const wrap = el('div', {}, b);
document.body.appendChild(wrap);
wrap.addEventListener('click', (e) => { blocked.push('wrapper capture'); e.stopPropagation(); }, true);
b.addEventListener('click', () => blocked.push('button'));
fire(b, 'click');
console.log('capture can stop it early:', blocked, '<- the button never heard its own click');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58// ---- the stand-in ----------------------------------------------------------
// An injected clock, so a 300ms wait costs no real time.
function makeClock() {
  let now = 0;
  let jobs = [];
  let nextId = 1;
  return {
    setTimeout(fn, ms) { const id = nextId++; jobs.push({ id, fn, at: now + ms }); return id; },
    clearTimeout(id) { jobs = jobs.filter((j) => j.id !== id); },
    pending: () => jobs.length,
    advance(ms) {
      now += ms;
      const due = jobs.filter((j) => j.at <= now).sort((a, b) => a.at - b.at);
      jobs = jobs.filter((j) => j.at > now);
      for (const job of due) job.fn();
    },
  };
}

// ---- the answer ------------------------------------------------------------
function debounce(fn, wait, clock = { setTimeout, clearTimeout }) {
  let timer = null;
  return (...args) => {
    clock.clearTimeout(timer);            // cancel the previous plan
    timer = clock.setTimeout(() => fn(...args), wait);
  };
}

const clock = makeClock();
const box = el('input', { id: 'box' });
document.body.appendChild(box);

let keystrokes = 0;
const searches = [];

const search = debounce((value) => searches.push(value), 300, clock);

box.addEventListener('input', (event) => {
  keystrokes++;
  search(event.target.value);
});

const type = (text) => { box.value = text; fire(box, 'input'); };

// Typing "Abuja" one letter at a time, 50ms apart.
for (const partial of ['A', 'Ab', 'Abu', 'Abuj', 'Abuja']) {
  type(partial);
  clock.advance(50);
}
const keystrokesAfterWord = keystrokes;      // snapshot: more typing happens below
console.log('mid-typing : keystrokes', keystrokes, '| searches', searches.length, '| pending', clock.pending());
clock.advance(300);
console.log('after quiet: keystrokes', keystrokes, '| searches', searches);

// A pause in the middle produces two searches.
type('L'); clock.advance(400);
type('La'); clock.advance(400);
console.log('with pauses:', searches);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47const KEY = 'gsh-counter';

// Read defensively: the value may be missing, or left over from an older version
// of the code, or edited by hand in devtools.
function readCount() {
  const raw = localStorage.getItem(KEY);      // null if never set
  const n = Number(raw);
  return Number.isInteger(n) && n >= 0 ? n : 0;
}

function increment() {
  try {
    localStorage.setItem(KEY, String(readCount() + 1));   // String(), explicitly
    return { ok: true, count: readCount() };
  } catch (error) {
    // Full, or private browsing with storage blocked. Do not let this crash the page.
    return { ok: false, why: error.name };
  }
}

const button = el('button', { id: 'inc', type: 'button' }, 'Count up');
document.body.appendChild(button);
button.addEventListener('click', increment);

console.log('before anything is stored:', JSON.stringify(localStorage.getItem(KEY)), '<- null');
console.log('so the count reads        :', readCount());

fire(button, 'click');
fire(button, 'click');
fire(button, 'click');
console.log('after three clicks       :', readCount());
console.log('what is actually stored  :', JSON.stringify(localStorage.getItem(KEY)), 'a', typeof localStorage.getItem(KEY));

// A number goes in, a string comes out.
localStorage.setItem('demo', 42);
console.log('stored the number 42, got:', JSON.stringify(localStorage.getItem('demo')));

// Rubbish in the key does not break the counter.
localStorage.setItem(KEY, 'not a number');
console.log('with rubbish stored      :', readCount(), '<- falls back to 0');

// A full or blocked store.
localStorage.setItem(KEY, '3');
localStorage.failNextWith(new DOMException_('quota exceeded', 'QuotaExceededError'));
const failed = increment();
console.log('when the store refuses   :', failed);
console.log('the count is unchanged   :', readCount());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45const KEY = 'gsh-cart';

// Reading has to survive: a missing key, malformed JSON, and valid JSON of the
// wrong shape. All three happen to data that lives in a browser.
function readCart() {
  try {
    const value = JSON.parse(sessionStorage.getItem(KEY));
    return Array.isArray(value) ? value : [];
  } catch {
    return [];                        // malformed: start over rather than crash
  }
}

const writeCart = (cart) => sessionStorage.setItem(KEY, JSON.stringify(cart));

function addToCart(name, kobo) {
  const cart = readCart();
  const existing = cart.find((item) => item.name === name);
  if (existing) existing.qty++;
  else cart.push({ name, kobo, qty: 1 });
  writeCart(cart);
  return cart;
}

// Money in kobo, as integers. 0.1 + 0.2 is not 0.3 in any binary float.
const total = (cart) => cart.reduce((sum, item) => sum + item.kobo * item.qty, 0);
const naira = (kobo) => '\u20a6' + (kobo / 100).toLocaleString('en-NG', { minimumFractionDigits: 2 });

console.log('empty to begin with       :', readCart());
addToCart('Ticket to Abuja', 450000);
addToCart('Ticket to Kano', 620000);
addToCart('Ticket to Abuja', 450000);        // same item again
const cart = readCart();
console.log('cart                      :', cart);
console.log('total                     :', naira(total(cart)));
console.log('stored as a string        :', sessionStorage.getItem(KEY).slice(0, 60) + '...');
console.log('its type                  :', typeof sessionStorage.getItem(KEY));

// Malformed JSON in the key.
sessionStorage.setItem(KEY, '{not json');
console.log('with malformed JSON stored:', readCart(), '<- recovered, did not throw');

// Valid JSON of the wrong shape.
sessionStorage.setItem(KEY, '"a string"');
console.log('with the wrong shape      :', readCart(), '<- also recovered');