'classchange' Event - with watchClassChange and addEventListener('classchange', ...)

classchange.js

"use strict";
{
  const config   = {attributes: true};
  const observer = new MutationObserver(sendEvent);
  const listDiff = new WeakMap();
  
  Object.assign(self,{watchClassChange});
  
  function sendEvent(attrChanges) {
    attrChanges
      .filter(attrChange => attrChange.attributeName === 'class')
      .forEach(classChange => classChange.target.dispatchEvent(
        new CustomEvent('classchange',{ 
          bubbles:  true,
          detail:   { changes:  getChanges(classChange.target) }
        })));
  }
  
  function watchClassChange(...elems) {
    elems
      .map(elem => (observer.observe(elem,config), elem))
      .forEach(elem => !listDiff.has(elem) ? 
        listDiff.set(elem,{classes:new Set(elem.classList)}) 
        : void 0);
  }
  
  function getChanges(elem) {
    const current = new Set(elem.classList);
    const cached = listDiff.get(elem);
    const previous = cached.classes;
    cached.classes = current;
    return {
      added:    new Set([...current].filter(c => !previous.has(c))),
      removed:  new Set([...previous].filter(p => !current.has(p)))
    };
  }
}

Using (after it is placed in page context):

watchClassChange(document.body);

document.addEventListener('classchange', x => console.log(x));

document.body.classList.add('abc');

// CustomEvent {isTrusted: false, 
//   detail: {added: Set(1), removed: Set(0)}, type: "classchange", target: body.abc, currentTarget: document, …}

document.body.classList.remove('abc');

// CustomEvent {isTrusted: false, 
//   detail: {added: Set(0), removed: Set(1)}, type: "classchange", target: body, currentTarget: document, …}