JavaScript: Events, 1–9

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
32const log = [];

const button = document.createElement('button');
button.type = 'button';                       // without this, a button in a form submits
button.textContent = 'Click me';
document.body.appendChild(button);

// Named, so it can be removed later. An inline arrow cannot be.
function onClick(event) {
  log.push(`clicked: ${event.type} on ${event.target.tagName}`);
}

button.addEventListener('click', onClick);
button.addEventListener('click', onClick);    // ignored: same function, same type

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

fire(button, 'click');
console.log('after two clicks:', log.length, 'entries');

button.removeEventListener('click', onClick);
fire(button, 'click');
console.log('after removing the listener:', log.length, 'entries (unchanged)');

// A different function IS a second listener, even with identical code.
let extra = 0;
button.addEventListener('click', () => extra++);
button.addEventListener('click', () => extra++);
fire(button, 'click');
const extraAfterOneClick = extra;        // snapshot: later assertions click again
console.log('two separate arrow functions both ran:', extra);

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
46const trigger = el('button', { id: 'trigger', type: 'button', 'aria-expanded': 'false', 'aria-controls': 'list' }, 'Choose a route');
const routes = ['Lagos to Abuja', 'Lagos to Kano', 'Lagos to Enugu'];
const list = el('ul', { id: 'list', hidden: '' },
  routes.map((r) => el('li', {}, el('button', { type: 'button' }, r))));
const out = el('p', { id: 'out' }, 'nothing chosen yet');
document.body.appendChild(el('div', { id: 'menu' }, [trigger, list, out]));

// One source of truth. Everything visible is derived from it, so the visual
// state and the announced state cannot drift apart.
let open = false;

function render() {
  if (open) list.removeAttribute('hidden');
  else list.setAttribute('hidden', '');
  trigger.setAttribute('aria-expanded', String(open));
}

trigger.addEventListener('click', (event) => {
  event.stopPropagation();          // or the document listener below closes it again
  open = !open;
  render();
});

// Delegation: one listener for however many options there are.
list.addEventListener('click', (event) => {
  if (event.target.tagName !== 'BUTTON') return;
  out.textContent = `chose: ${event.target.textContent}`;
  open = false;
  render();
});

document.addEventListener('click', () => { if (open) { open = false; render(); } });
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape' && open) { open = false; render(); }
});

render();

const isOpen = () => !list.hasAttribute('hidden');
const announced = () => trigger.getAttribute('aria-expanded');

console.log('at rest   : open', isOpen(), '| aria-expanded', announced());
fire(trigger, 'click');
console.log('clicked   : open', isOpen(), '| aria-expanded', announced());
fire(trigger, 'click');
console.log('again     : open', isOpen(), '| aria-expanded', announced());

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
32const child = el('b', {}, 'bold child');
const box = el('div', { id: 'box' }, ['hover me, and my ', child]);
document.body.appendChild(box);

let enters = 0;
let overs = 0;

// mouseenter does NOT bubble, so it fires once for the box itself.
box.addEventListener('mouseenter', () => { enters++; box.style.backgroundColor = '#eaf6ef'; });
box.addEventListener('mouseleave', () => { box.style.backgroundColor = ''; });

// mouseover DOES bubble, so crossing onto a child fires it again.
box.addEventListener('mouseover', () => { overs++; });

// Entering the box itself: mouseenter does not bubble, so bubbles is false.
const enterBox = () => box.dispatchEvent(new Event('mouseenter', { bubbles: false }));
const overBox = () => fire(box, 'mouseover');
const overChild = () => fire(child, 'mouseover');     // bubbles up to the box

console.log('background at rest:', JSON.stringify(box.style.backgroundColor));
enterBox();
overBox();
console.log('after entering    :', box.style.backgroundColor, '| enters', enters, 'overs', overs);

// Now the pointer moves onto the bold child, without leaving the box.
overChild();
overChild();
console.log('after crossing onto the child twice: enters', enters, 'overs', overs);
console.log('<- mouseover counted the child crossings; mouseenter did not');

box.dispatchEvent(new Event('mouseleave', { bubbles: false }));
console.log('after leaving     :', JSON.stringify(box.style.backgroundColor));

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
52const nameInput = el('input', { id: 'name', name: 'name', 'aria-describedby': 'name-error', required: '' });
const nameError = el('span', { id: 'name-error', role: 'alert' });
const phoneInput = el('input', { id: 'phone', name: 'phone', 'aria-describedby': 'phone-error', required: '' });
const phoneError = el('span', { id: 'phone-error', role: 'alert' });
const form = el('form', { id: 'form', novalidate: '' }, [
  el('label', { for: 'name' }, 'Full name'), nameInput, nameError,
  el('label', { for: 'phone' }, 'Phone'), phoneInput, phoneError,
  el('button', { type: 'submit' }, 'Submit'),
]);
document.body.appendChild(form);

const fields = [
  { input: nameInput, error: nameError, label: 'Full name' },
  { input: phoneInput, error: phoneError, label: 'Phone' },
];

let submitted = false;
let focused = null;

form.addEventListener('submit', (event) => {
  event.preventDefault();                     // never let it through unvalidated
  let firstBad = null;

  for (const { input, error, label } of fields) {
    // trim(), because a field holding only spaces is empty to a reader.
    const empty = input.value.trim() === '';
    input.setAttribute('aria-invalid', String(empty));
    error.textContent = empty ? `${label} is required.` : '';
    if (empty && !firstBad) firstBad = input;
  }

  if (firstBad) { focused = firstBad.id; submitted = false; return; }
  submitted = true;
});

const errors = () => fields.map((f) => f.error.textContent).filter(Boolean);
const invalid = () => fields.filter((f) => f.input.getAttribute('aria-invalid') === 'true').length;

fire(form, 'submit');
console.log('both empty      :', errors(), '| invalid:', invalid(), '| focus moved to', focused);

nameInput.value = 'Ada Obi';
fire(form, 'submit');
console.log('name filled     :', errors(), '| focus moved to', focused);

phoneInput.value = '   ';                     // spaces only
fire(form, 'submit');
console.log('phone is spaces :', errors(), '<- still counted as empty');

phoneInput.value = '0801 234 5678';
fire(form, 'submit');
console.log('both filled     : submitted?', submitted, '| errors:', errors());

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 swatch = (fill) =>
  'data:image/svg+xml;utf8,' + encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="260" height="120"><rect width="100%" height="100%" fill="${fill}"/></svg>`);

const slides = [
  { src: swatch('#3055d8'), alt: 'Slide 1, Lagos' },
  { src: swatch('#17734b'), alt: 'Slide 2, Abuja' },
  { src: swatch('#a3341f'), alt: 'Slide 3, Kano' },
];

const stage = el('div', { id: 'stage', 'aria-live': 'polite' });
const prev = el('button', { id: 'prev', type: 'button' }, 'Previous');
const next = el('button', { id: 'next', type: 'button' }, 'Next');
document.body.appendChild(el('div', {}, [prev, next, stage]));

let index = 0;                                  // the single source of truth

function render() {
  stage.textContent = '';                       // clear
  const img = document.createElement('img');
  img.src = slides[index].src;
  img.alt = slides[index].alt;                  // the alt changes with the slide
  stage.appendChild(img);
}

// + slides.length before the % , because JavaScript's % keeps the LEFT operand's
// sign: (0 - 1) % 3 is -1, not 2.
next.addEventListener('click', () => { index = (index + 1) % slides.length; render(); });
prev.addEventListener('click', () => { index = (index - 1 + slides.length) % slides.length; render(); });

render();

const shown = () => stage.querySelector('img').alt;

console.log('start:', shown());
fire(next, 'click'); console.log('next :', shown());
fire(next, 'click'); console.log('next :', shown());
fire(next, 'click'); console.log('next :', shown(), '<- wrapped to the start');
fire(prev, 'click'); console.log('prev :', shown(), '<- wrapped to the end');
console.log('why the + n:', (0 - 1) % 3, 'vs', (0 - 1 + 3) % 3);

// The walk-through above moved the index. Put it back before asserting, rather
// than writing assertions that depend on how many times it was clicked.
index = 0;
render();

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
59
60
61
62
63
64
65
66
67const stops = ['Ojota', 'Berger', 'Ibadan', 'Ilorin'];
const list = el('ul', { id: 'list' }, stops.map((s) => el('li', { draggable: 'true' }, s)));
document.body.appendChild(list);

let dragged = null;
let dropCount = 0;
let dragoverDefaultPrevented = false;

list.addEventListener('dragstart', (event) => { dragged = event.target; });

// THE line. A drop target is only a drop target if dragover cancels the default.
// Leave this out and drop is never delivered, with no error to tell you why.
list.addEventListener('dragover', (event) => {
  event.preventDefault();
  dragoverDefaultPrevented = event.defaultPrevented;
});

list.addEventListener('drop', (event) => {
  event.preventDefault();
  dropCount++;
  const target = event.target;
  if (!target || target === dragged || target.parentNode !== list) return;

  const items = [...list.children];
  // Moving down: insert after. Moving up: insert before.
  if (items.indexOf(dragged) < items.indexOf(target)) {
    list.insertBefore(dragged, target.nextSibling ?? null);
  } else {
    list.insertBefore(dragged, target);
  }
});

// Dragging is mouse-only. This is the keyboard route to the same result.
function move(item, direction) {
  const items = [...list.children];
  const i = items.indexOf(item);
  const j = i + direction;
  if (i === -1 || j < 0 || j >= items.length) return false;
  if (direction < 0) list.insertBefore(item, items[j]);
  else list.insertBefore(items[j], item);
  return true;
}

const order = () => [...list.children].map((li) => li.textContent);
const drag = (from, to) => {
  fire(list.children[from], 'dragstart');
  fire(list.children[to], 'dragover');
  fire(list.children[to], 'drop');
};

const reset = () => {
  list.textContent = '';
  for (const s of stops) list.appendChild(el('li', { draggable: 'true' }, s));
};

console.log('start :', order());
drag(0, 2);
const afterDown = order();
console.log('dragged item 0 down onto item 2:', afterDown);

reset();
drag(3, 0);
const afterUp = order();
console.log('dragged the last up onto the first:', afterUp);
console.log('dragover cancelled its default?', dragoverDefaultPrevented, '<- required, or drop never fires');

reset();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23const label = el('span', { id: 'state' }, 'off');
// A real button: focusable, and Space/Enter already fire click on it.
const sw = el('button', { id: 'sw', type: 'button', role: 'switch', 'aria-checked': 'false' }, ['Night mode ', label]);
document.body.appendChild(sw);

let toggles = 0;

sw.addEventListener('click', () => {
  // The attribute IS the state. Nothing else stores it, so nothing can disagree.
  const on = sw.getAttribute('aria-checked') === 'true';
  sw.setAttribute('aria-checked', String(!on));
  label.textContent = !on ? 'on' : 'off';
  toggles++;
});

const isOn = () => sw.getAttribute('aria-checked') === 'true';

console.log('at rest :', sw.getAttribute('aria-checked'), '| label', label.textContent);
fire(sw, 'click');
console.log('clicked :', sw.getAttribute('aria-checked'), '| label', label.textContent);
fire(sw, 'click');
console.log('again   :', sw.getAttribute('aria-checked'), '| label', label.textContent);
console.log('toggles :', toggles);

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
30const fill = el('div', { id: 'fill' });
const track = el('div', {
  id: 'track', role: 'progressbar',
  'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': '0',
  'aria-label': 'Upload progress',
}, fill);
document.body.appendChild(track);

function setProgress(value) {
  // Clamp first. A width of 140% overflows its container; a negative width is
  // invalid and silently ignored, leaving the bar at whatever it was.
  const pct = Math.min(100, Math.max(0, Number(value) || 0));
  fill.style.width = `${pct}%`;
  track.setAttribute('aria-valuenow', String(pct));
  return pct;
}

const buttons = [0, 35, 100, 140, -20].map((v) => {
  const b = el('button', { type: 'button', 'data-set': String(v) }, String(v));
  b.addEventListener('click', () => setProgress(b.getAttribute('data-set')));
  document.body.appendChild(b);
  return b;
});

const width = () => fill.style.width;
const announced = () => track.getAttribute('aria-valuenow');

for (const v of [0, 35, 100, 140, -20, 'abc']) {
  console.log(String(v).padEnd(5), '-> width', setProgress(v) + '%');
}

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 box = el('input', { id: 'box', placeholder: 'Type and press Enter' });
document.body.appendChild(box);

const submitted = [];
const seen = [];

box.addEventListener('keydown', (event) => {
  seen.push(event.key);
  if (event.key !== 'Enter') return;
  if (event.isComposing) return;         // mid-composition, Enter accepts the text
  if (event.repeat) return;              // a held key repeats; act once
  event.preventDefault();
  const value = box.value.trim();
  if (value === '') return;
  submitted.push(value);
  box.value = '';
});

// The real constructor is KeyboardEvent; the stand-in copies any extra option
// onto the event, so this behaves the same way.
const press = (key, extra = {}) => {
  const event = new Event('keydown', { bubbles: true, cancelable: true, key, ...extra });
  box.dispatchEvent(event);
  return event;
};

box.value = 'Ojota to Abuja';
const enter = press('Enter');
console.log('after Enter      :', submitted, '| box cleared:', JSON.stringify(box.value));
console.log('default prevented:', enter.defaultPrevented);

box.value = 'Berger';
press('a');
console.log('after a letter   :', submitted, '<- unchanged');

box.value = 'Berger';
press('Enter', { repeat: true });
console.log('a held Enter     :', submitted, '<- ignored');

box.value = 'Ilorin';
press('Enter', { isComposing: true });
console.log('while composing  :', submitted, '<- ignored');

press('Enter');
console.log('with an empty box:', submitted, '<- nothing added');
console.log('keys seen        :', seen);
console.log('keyCode for Enter was', 13, '- deprecated, do not use it');