trigger(), custom events and native listeners

shop/fire-actions.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Four ways to fire a click or a focus</title>
  </head>
  <body>
    <div id="wrap">
      <button type="button" id="pay">Pay</button>
      <label><input type="checkbox" id="gift"> Gift wrap</label>
      <a href="#offers" id="offers-link">Offers</a>
      <label for="pin">PIN code</label>
      <input id="pin">
    </div>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="record-hits.js"></script>
    <script src="fire-actions.js"></script>
  </body>
</html>

shop/record-hits.js

// record-hits.js: notes which listeners hear an event. listen(el, type) puts a jQuery handler and a native listener on
// the element and, once per event type, on #wrap around it. fire(label, how, after, wait) clears the notes, fires the
// event the way how() does, waits for wait() when one is given, and logs who heard it, in the order they heard it,
// with what after() reports.
const hits = [];
const onWrap = new Set();
function listen(el, type) {
  const note = (who) => () => hits.push(who);
  $(el).on(type, note('jQuery'));
  el.addEventListener(type, note('native'));
  if (onWrap.has(type)) return;
  onWrap.add(type);
  const wrap = document.getElementById('wrap');
  $(wrap).on(type, note('jQuery on #wrap'));
  wrap.addEventListener(type, note('native on #wrap'));
}
function report(label, extra) {
  console.log(`${label}: ${hits.length ? hits.join(', ') : 'nobody'}${extra ? `; ${extra}` : ''}`);
}
function fire(label, how, after = () => '', wait) {
  hits.length = 0;
  how();
  if (!wait) return report(label, after());
  return wait().then(() => report(label, after()));
}

shop/fire-actions.js

// fire-actions.js: a click on a button, a checkbox and a link, and focus on a field, each fired four ways: .trigger(),
// .triggerHandler(), dispatchEvent() of a real event, and the element's own method, with what changed on the page.
// A followed link changes the address a moment later, so each firing waits 20 ms before it reports.
const pay = document.getElementById('pay');
const gift = document.getElementById('gift');
const link = document.getElementById('offers-link');
const pin = document.getElementById('pin');
for (const el of [pay, gift, link]) listen(el, 'click');
listen(pin, 'focus');

const click = () => new MouseEvent('click', { bubbles: true, cancelable: true });
const pause = () => new Promise((done) => setTimeout(done, 20));
window.addEventListener('hashchange', () => hits.push(`the link was followed to ${location.hash}`));
const ticked = () => `gift wrap ticked: ${gift.checked}`;
const followed = () => {
  history.replaceState(null, '', location.pathname);
  return '';
};
const focused = () => {
  const now = document.activeElement === pin;
  pin.blur();
  return `#pin has focus: ${now}`;
};

(async function () {
  for (const [el, what, after] of [
    [pay, 'click on the button', () => ''],
    [gift, 'click on the checkbox', ticked],
    [link, 'click on the link', followed],
  ]) {
    for (const [how, run] of [
      ['.trigger()', () => $(el).trigger('click')],
      ['.triggerHandler()', () => $(el).triggerHandler('click')],
      ['dispatchEvent()', () => el.dispatchEvent(click())],
      ['el.click()', () => el.click()],
    ]) {
      await fire(`${what} by ${how}`, run, after, pause);
    }
  }
  for (const [how, run] of [
    ['.trigger()', () => $(pin).trigger('focus')],
    ['.triggerHandler()', () => $(pin).triggerHandler('focus')],
    ['dispatchEvent()', () => pin.dispatchEvent(new FocusEvent('focus'))],
    ['el.focus()', () => pin.focus()],
  ]) {
    await fire(`focus by ${how}`, run, focused, pause);
  }
})();

shop/fire-data.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Four ways to fire an event</title>
  </head>
  <body>
    <div id="wrap">
      <div id="cart" data-count="2">Cart: 2 items</div>
      <label for="slot">Delivery slot</label>
      <select id="slot"><option>Morning</option><option>Evening</option></select>
      <label for="note">Note</label>
      <input id="note">
    </div>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="record-hits.js"></script>
    <script src="fire-data.js"></script>
  </body>
</html>

shop/fire-data.js

// fire-data.js: a custom event, change and input, each fired three ways: .trigger(), .triggerHandler() and
// dispatchEvent() of a real event that bubbles. None of the three has a method of its own on the element.
const cart = document.getElementById('cart');
const slot = document.getElementById('slot');
const note = document.getElementById('note');
listen(cart, 'cart:updated');
listen(slot, 'change');
slot.onchange = () => hits.push('onchange property');
listen(note, 'input');

for (const [el, type, make] of [
  [cart, 'cart:updated', () => new CustomEvent('cart:updated', { bubbles: true, detail: { count: 3 } })],
  [slot, 'change', () => new Event('change', { bubbles: true })],
  [note, 'input', () => new Event('input', { bubbles: true })],
]) {
  fire(`${type} by .trigger()`, () => $(el).trigger(type));
  fire(`${type} by .triggerHandler()`, () => $(el).triggerHandler(type));
  fire(`${type} by dispatchEvent()`, () => el.dispatchEvent(make()));
}
console.log(`methods of their own: cart['cart:updated'] ${typeof cart['cart:updated']}, slot.change ${typeof slot.change}, note.input ${typeof note.input}`);

// Changing a value from code fires nothing, with jQuery or without.
fire(".val('Evening')", () => $(slot).val('Evening'), () => `the value is now ${slot.value}`);
fire("note.value = 'Ring twice'", () => {
  note.value = 'Ring twice';
}, () => `the value is now ${note.value}`);

shop/picker.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Delivery day</title>
  </head>
  <body>
    <form id="checkout">
      <label for="date">Delivery day</label>
      <input id="date" name="date" value="">
      <div id="calendar">
        <button type="button" data-day="tue">Tuesday</button>
        <button type="button" data-day="wed">Wednesday</button>
      </div>
      <p id="charge">Delivery: choose a day</p>
    </form>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="checkout.js"></script>
    <script src="picker.js"></script>
  </body>
</html>

shop/checkout.js

// checkout.js: the checkout's newer code, written without jQuery. It shows the delivery charge for the chosen day,
// listening on the form for the input and change events that the day field sends.
const CHARGE = { tue: '₹49', wed: '₹79' };
const form = document.getElementById('checkout');
function showCharge(event) {
  const day = form.elements.date.value;
  document.getElementById('charge').textContent = `Delivery: ${CHARGE[day] ?? 'choose a day'}`;
  console.log(`checkout, native ${event.type} listener: ${document.getElementById('charge').textContent}`);
}
form.addEventListener('input', showCharge);
form.addEventListener('change', showCharge);

shop/picker.js

// picker.js: a small jQuery day picker, written the way many old plugins are. A click on a day writes it into the
// field with .val() and announces it with .trigger('change').
$.fn.dayPicker = function () {
  const $field = this;
  $('#calendar').on('click', 'button', function () {
    $field.val(this.dataset.day).trigger('change');
  });
  return this;
};
$('#date').dayPicker();

// Older page code listens with jQuery.
$('#date').on('change', function () {
  console.log(`jQuery change handler: the field says ${this.value}`);
});

shop/extras.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Extra parameters and triggerHandler()</title>
  </head>
  <body>
    <div id="header">
      <span class="badge" id="badge-top">2</span>
      <span class="badge" id="badge-side">2</span>
    </div>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="extras.js"></script>
  </body>
</html>

shop/extras.js

// extras.js: what only jQuery's own handlers receive: the extra parameters of .trigger(), and the result that
// .triggerHandler() returns.
const $badges = $('.badge');
$badges.on('cart:changed', function (event, count, source) {
  console.log(`#${this.id}: extra parameters ${count} and ${source}`);
  return Number(this.textContent) !== count; // true when the badge must be redrawn
});
$('#header').on('cart:changed', function () {
  console.log('the header heard it too');
});
document.getElementById('badge-top').addEventListener('cart:changed', function () {
  console.log('native listener on #badge-top heard it');
});

const back = $badges.trigger('cart:changed', [3, 'checkout']);
console.log(`.trigger() ran on ${$badges.length} badges and returned the jQuery object: ${back === $badges}`);

const answer = $badges.triggerHandler('cart:changed', [2, 'checkout']);
console.log(`.triggerHandler() ran on the first badge only, did not bubble, and returned ${answer}`);

shop/submit.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Pay</title>
  </head>
  <body>
    <form id="pay" action="/pay" method="post">
      <label for="pin">PIN code</label>
      <input id="pin" name="pin" required pattern="[0-9]{6}">
      <button type="button" id="by-trigger">Pay with .trigger('submit')</button>
      <button type="button" id="by-request">Pay with requestSubmit()</button>
    </form>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="submit.js"></script>
  </body>
</html>

shop/submit.js

// submit.js: a payment form. Its newer code sends it with fetch() from a native submit listener and stays on the
// page; an older jQuery handler logs the attempt. One button sends it with .trigger('submit'), the other with
// requestSubmit().
const form = document.getElementById('pay');
const pin = form.elements.pin;
$(form).on('submit', function () {
  console.log('jQuery submit handler ran');
});
form.addEventListener('submit', function (event) {
  event.preventDefault();
  console.log('native submit listener ran: it sends the form with fetch() and the page stays');
});
pin.addEventListener('invalid', function () {
  console.log(`the PIN code field is invalid (valueMissing ${pin.validity.valueMissing}), so the form was not sent`);
});
$('#by-trigger').on('click', function () {
  $(form).trigger('submit');
});
document.getElementById('by-request').addEventListener('click', function () {
  form.requestSubmit();
});

shop/cart-events.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cart events</title>
  </head>
  <body>
    <header id="header">Cart: <span id="badge">0</span></header>
    <section id="shop">
      <div id="cart" data-count="0">
        <button type="button" id="add-old">Add a kettle (old plugin)</button>
        <button type="button" id="add-new">Add a lamp (new plugin)</button>
      </div>
    </section>
    <script src="https://code.jquery.com/jquery-4.0.0.min.js" integrity="sha256-OaVG6prZf4v69dPg6PhVattBXkcOWQB62pdZ3ORyrao=" crossorigin="anonymous"></script>
    <script src="cart-events.js"></script>
  </body>
</html>

shop/cart-events.js

// cart-events.js: two versions of a cart plugin announcing the new count, and the page's listeners: a jQuery handler
// written for the old version, one written for both, and the header's native listener.
const cart = document.getElementById('cart');
let count = 0;

// Old version: jQuery's own event, with the count as an extra parameter.
$('#add-old').on('click', function () {
  count += 1;
  $(cart).trigger('cart:updated', [count]);
});
// New version: a real event that bubbles, with the count in detail.
$('#add-new').on('click', function () {
  count += 1;
  cart.dispatchEvent(new CustomEvent('cart:updated', { bubbles: true, detail: { count } }));
});

// Written for the old version: it reads the extra parameter.
$('#shop').on('cart:updated', function (event, newCount) {
  console.log(`jQuery handler for the old version: extra parameter ${newCount}, event.detail ${JSON.stringify(event.detail)}`);
});
// Written for both: the count from detail when a real event carries one, else from the extra parameter.
$('#shop').on('cart:updated', function (event, newCount) {
  console.log(`jQuery handler for both: count ${event.detail?.count ?? newCount}`);
});
// The header, without jQuery.
document.addEventListener('cart:updated', function (event) {
  document.getElementById('badge').textContent = String(event.detail.count);
  console.log(`native listener on document: the badge says ${event.detail.count}`);
});