Episode 014

[ahJ4s|1726378598450|Sat Sep 14 2024 22:36:38 GMT-0700 (Pacific Daylight Time)|code]

"HTML class-based event-listeners";
if (typeof ep014 == "undefined")
  ep014 = [ function (code) { return (code = {

booleanOptions:
  [
    [ "capture", false ],
    [ "once", false ],
    [ "passive", false ]
  ],

entries: {},

typeCounts: {},

addClassEventListener:
function addClassEventListener(class_name, type, listener, options)
  {
    var entries;
    var entries_name;
    var entry;
    var existing_entry;
    var has;
    var i;

    code.checkArgumentCount(arguments);
    entry = { className: class_name };
    code.processCommonArguments(entry, type, listener, options);
    if (!code.checkListener(entry, listener))
      return;
    entries_name = class_name + " " + type + " " + entry.phase;
    has = Object.prototype.hasOwnProperty;
    if (!has.call(code.entries, entries_name))
      {
        code.entries[entries_name] = [];
        if (!has.call(code.typeCounts, type))
          {
            if (code.maybeCallable(document.addEventListener))
              document.addEventListener(type, code.classEventListener, false);
              else
              document.attachEvent("on" + type, code.classEventListener);
            code.typeCounts[type] = 0;
          }
        code.typeCounts[type] += 1;
      }
    entries = code.entries[entries_name];
    /* Slow */
    for (i = 0; i < entries.length; ++i)
      {
        existing_entry = entries[i];
        if (existing_entry.listener === listener)
          return;
      }
    entries.push(entry);
  },

checkArgumentCount:
function checkArgumentCount(args)
  {
    if (args.length < 3)
      throw new Error("Too few arguments");
    if (args.length > 4)
      throw new Error("Too many arguments");
  },

checkListener:
function checkListener(entry, listener)
  {
    switch (typeof listener)
      {
        case "object":
        if (listener === null)
          return false;
        if (!code.maybeCallable(listener.handleEvent))
          throw new Error("Listener object must have a callable handleEvent property");
        entry.func = listener.handleEvent;
        entry.handler = listener;
        break;

        case "function":
        entry.func = listener;
        entry.handler = null;
        break;

        default:
        throw new Error("Listener must be a function or an object");
      }
    entry.listener = listener;
    /* Entry fully populated */
    return true;
  },

classEventListener:
function classEventListener(event)
  {
    var derived_event;
    var stop;

    if (event.cancelBubble)
      return;

    stop = { now: false, soon: false };
    derived_event = code.deriveFromEvent(event, stop);
    function dispatchClassEventListeners()
      {
        return code.dispatch(derived_event, stop);
      }
    setTimeout(dispatchClassEventListeners, 0);
  },

deriveFromEvent:
function deriveFromEvent(event, stop)
  {
    var derived_event;
    var derived_event_prototype;
    var has;
    var prop;
    var prop_val;

    function derived_event_constructor() {}
    derived_event_prototype = {};
    derived_event_constructor.prototype = derived_event_prototype;
    derived_event = new derived_event_constructor;
    has = Object.prototype.hasOwnProperty;
    for (prop in event)
      {
        prop_val = event[prop];
        /* Overrides */
        switch (true)
          {
            case prop == "stopImmediatePropagation":
            prop_val = code.makeStopImmediatePropagation(stop);
            break;

            case prop == "stopPropagation":
            prop_val = code.makeStopPropagation(stop);
            break;

            case typeof prop_val == "function":
            /* Functions might expect the original 'this' */
            prop_val = code.wrap(event, prop_val);
            break;
          }
        /* Try to mimic original hasOwnProperty status */
        if (has.call(event, prop))
          derived_event[prop] = prop_val;
          else
          derived_event_prototype[prop] = prop_val;
      }
    /* Fix-ups */
    if (typeof derived_event.stopImmediatePropagation != "function")
      derived_event.stopImmediatePropagation = code.makeStopImmediatePropagation(stop);
    if (typeof derived_event.stopPropagation != "function")
      derived_event.stopPropagation = code.makeStopPropagation(stop);
    if (derived_event.bubbles === undefined)
      derived_event.bubbles = true;
    if (!derived_event.target)
      derived_event.target = derived_event.srcElement;
    return derived_event;
  },

dispatch:
function dispatch(event, stop)
  {
    var bottom;
    var class_name;
    var current;
    var element;
    var element_classes;
    var entry;
    var entries;
    var i;
    var middle;
    var prefix;
    var target;
    var top;
    var type;

    middle = { element: event.target, entries: [], next: null };
    bottom = middle;
    top = middle;
    type = event.type;
    for (element = event.target; element; element = element.parentElement)
      {
        element_classes = element.className;
        if (!element_classes)
          continue;
        element_classes = element_classes.split(" ");
        for (i = 0; i < element_classes.length; ++i)
          {
            class_name = element_classes[i];
            prefix = class_name + " " + type + " ";
            if (Object.prototype.hasOwnProperty.call(code.entries, prefix + "capture"))
              {
                entries = code.entries[prefix + "capture"].slice();
                if (element === event.target)
                  middle.entries = entries;
                  else
                  top = { element: element, entries: entries, next: top };
              }
            if (!event.bubbles)
              continue;
            if (Object.prototype.hasOwnProperty.call(code.entries, prefix + "bubble"))
              {
                entries = code.entries[prefix + "bubble"].slice();
                if (element === event.target)
                  {
                    middle.entries = middle.entries.concat(entries);
                  }
                  else
                  {
                    bottom.next = { element: element, entries: entries, next: null };
                    bottom = bottom.next;
                  }
              }
          }
      }
    for (current = top; current !== null && !stop.soon; current = current.next)
      {
        element = current.element;
        entries = current.entries;
        for (i = 0; i < entries.length && !stop.now; ++i)
          {
            entry = entries[i];
            if (entry.removed)
              continue;
            if (entry.signal.aborted)
              {
                code.removeClassEventListener(entry.className, entry.type, entry.listener, entry);
                continue;
              }
            if (element === event.target)
              event.eventPhase = 2;
              else
              event.eventPhase = entry.eventPhase;
            if (event.cancelBubble && event.eventPhase == 3)
              {
                stop.now = true;
                stop.soon = true;
                break;
              }
            if (entry.handler)
              target = entry.handler;
              else
              target = element;
            event.currentTarget = element;
            try
              {
                entry.func.call(target, event);
              }
              catch (caught)
              {
                setTimeout(code.eventListenerDeferredThrow(caught, entry, element, event), 0);
              }
            if (entry.once)
              code.removeClassEventListener(entry.className, entry.type, entry.listener, entry);
          }
      }
    event.currentTarget = null;
    event.eventPhase = 0;
  },

eventListenerDeferredThrow:
function eventListenerDeferredThrow(thrown_earlier, entry, element, event)
  {
    function rethrow()
      {
        throw thrown_earlier;
      }
    return rethrow;
  },

main:
function main()
  {
    var exports;

    exports =
      {
        addClassEventListener: code.addClassEventListener,
        nonProduction: code,
        removeClassEventListener: code.removeClassEventListener
      };
    return exports;
  },

makeStopImmediatePropagation:
function makeStopImmediatePropagation(stop)
  {
    function stopImmediatePropagation()
      {
        stop.now = true;
        stop.soon = true;
      }
    return stopImmediatePropagation;
  },

makeStopPropagation:
function makeStopPropagation(stop)
  {
    function stopPropagation()
      {
        stop.soon = true;
      }
    return stopPropagation;
  },

maybeCallable:
function maybeCallable(value)
  {
    return typeof value == "function" || (typeof value == "object" && value !== null);
  },

processCommonArguments:
function processCommonArguments(entry, type, listener, options)
  {
    var i;
    var option;
    var option_default;
    var option_name;

    if (typeof type != "string")
      throw new Error("Event-type must be a string");
    entry.type = type;
    switch (typeof options)
      {
        case "undefined":
        options = { capture: false };
        break;

        case "boolean":
        options = { capture: options };
        break;

        case "object":
        if (options === null)
          throw new Error("options cannot be null");
        break;

        case "function":
        /* Functions can have properties */
        break;

        default:
        throw new Error("Invalid options type");
      }
    for (i = 0; i < code.booleanOptions.length; ++i)
      {
        /* Known boolean option: [ name, default value ] */
        option = code.booleanOptions[i];
        option_default = option[1];
        option_name = option[0];
        switch (typeof options[option_name])
          {
            case "undefined":
            entry[option_name] = option_default;
            break;

            case "boolean":
            /* Copy */
            entry[option_name] = options[option_name];
            break;

            default:
            throw new Error("Invalid options." + option_name + " type: boolean expected");
          }
      }
    switch (typeof options.signal)
      {
        case "undefined":
        /* Default: will never be aborted */
        entry.signal = { aborted: false };
        break;

        case "object":
        if (options.signal === null)
          throw new Error("options.signal cannot be null");
        /* Fall through */

        case "function":
        /* Functions can have properties */
        entry.signal = options.signal;
        break;

        default:
        throw new Error("Invalid options.signal type: must have properties");
      }
    /* A bit redundant, but oh well */
    if (entry.capture)
      {
        entry.eventPhase = 1;
        entry.phase = "capture";
      }
      else
      {
        entry.eventPhase = 3;
        entry.phase = "bubble";
      }
    entry.removed = false;
    /* Entry initially populated */
  },

removeClassEventListener:
function removeClassEventListener(class_name, type, listener, options)
  {
    var entries;
    var entries_name;
    var entry;
    var existing_entry;
    var i;

    code.checkArgumentCount(arguments);
    entry = { className: class_name };
    code.processCommonArguments(entry, type, listener, options);
    if (!code.checkListener(entry, listener))
      return;
    entries_name = class_name + " " + type + " " + entry.phase;
    if (!Object.prototype.hasOwnProperty.call(code.entries, entries_name))
      return;
    entries = code.entries[entries_name];
    /* Slow */
    for (i = 0; i < entries.length; ++i)
      {
        existing_entry = entries[i];
        if (existing_entry.listener !== listener)
          continue;
        entries.splice(i, 1);
        existing_entry.removed = true;
        if (entries.length != 0)
          break;
        delete code.entries[entries_name];
        code.typeCounts[type] -= 1;
        if (code.typeCounts[type] < 1)
          {
            if (code.maybeCallable(document.removeEventListener))
              document.removeEventListener(type, code.classEventListener, false);
              else
              document.detachEvent("on" + type, code.classEventListener);
            delete code.typeCounts[type];
          }
        break;
      }
  },

wrap:
function wrap(this_target, func)
  {
    function wrapper()
      {
        return func.apply(this_target, arguments);
      }
    return wrapper;
  }

}).main(); } ][0]();
"OK";

[ahJ4s|1726378598454|Sat Sep 14 2024 22:36:38 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726378982114|Sat Sep 14 2024 22:43:02 GMT-0700 (Pacific Daylight Time)|code]

"Simple demonstration of the phases";
[ function (code) { return (code = {

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    ep014.addClassEventListener(code.testName, "click", code.onclick, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick, false);
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event)
  {
    var elem_name;
    var msg;

    elem_name = this.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase + "\n" +
        "Click X: " + (event.x || event.pageX)
      );
    alert(msg);
  }

}).main(); } ][0]("test1");

setTimeout(ep014.test1.makeElements, 0);
"OK";

[ahJ4s|1726378982119|Sat Sep 14 2024 22:43:02 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726379408995|Sat Sep 14 2024 22:50:08 GMT-0700 (Pacific Daylight Time)|code]

"Abort the bubble phase";
[ function (code) { return (code = {

abortSignal:
  {
    aborted: false
  },

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        /* Reset */
        ep014[code.testName].abortSignal.aborted = false;
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    ep014.addClassEventListener(code.testName, "click", code.onclick, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick, { signal: code.abortSignal });
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event)
  {
    var elem_name;
    var msg;

    elem_name = this.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase
      );
    alert(msg);
    if (!code.abortSignal.aborted && elem_name == "BUTTON" && event.eventPhase == 2)
      {
        code.abortSignal.aborted = true;
        alert(code.testName + " aborting");
      }
  }

}).main(); } ][0]("test2");

setTimeout(ep014.test2.makeElements, 0);
"OK";

[ahJ4s|1726379408996|Sat Sep 14 2024 22:50:08 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726379646261|Sat Sep 14 2024 22:54:06 GMT-0700 (Pacific Daylight Time)|code]

"Remove the bubble phase";
[ function (code) { return (code = {

removed: false,

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        /* Reset */
        ep014.addClassEventListener(code.testName, "click", ep014[code.testName].onclick, false);
        ep014[code.testName].removed = false;
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    ep014.addClassEventListener(code.testName, "click", code.onclick, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick, false);
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event)
  {
    var elem_name;
    var msg;

    elem_name = this.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase
      );
    alert(msg);
    if (!code.removed && elem_name == "BUTTON" && event.eventPhase == 2)
      {
        ep014.removeClassEventListener(code.testName, "click", code.onclick, false);
        code.removed = true;
        alert(code.testName + " removed bubbling");
      }
  }

}).main(); } ][0]("test3");

setTimeout(ep014.test3.makeElements, 0);
"OK";

[ahJ4s|1726379646262|Sat Sep 14 2024 22:54:06 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726379762392|Sat Sep 14 2024 22:56:02 GMT-0700 (Pacific Daylight Time)|code]

"Cancel the bubble phase";
[ function (code) { return (code = {

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    ep014.addClassEventListener(code.testName, "click", code.onclick, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick, false);
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event)
  {
    var elem_name;
    var msg;

    elem_name = this.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase
      );
    alert(msg);
    if (!event.cancelBubble)
      {
        event.cancelBubble = true;
        alert(code.testName + " set cancelBubble");
      }
  }

}).main(); } ][0]("test4");

setTimeout(ep014.test4.makeElements, 0);
"OK";

[ahJ4s|1726379762395|Sat Sep 14 2024 22:56:02 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726379914020|Sat Sep 14 2024 22:58:34 GMT-0700 (Pacific Daylight Time)|code]

"Stop immediate propagation during the target phase";
[ function (code) { return (code = {

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    ep014.addClassEventListener(code.testName, "click", code.onclick1, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick2, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick1, false);
    ep014.addClassEventListener(code.testName, "click", code.onclick2, false);
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event, sub)
  {
    var elem_name;
    var msg;

    elem_name = this.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + " sub " + sub + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase
      );
    alert(msg);
    if (elem_name == "BUTTON" && event.eventPhase == 2)
      {
        event.stopImmediatePropagation();
        alert(code.testName + " sub " + sub + " called stopImmediatePropagation");
      }
  },

onclick1: function(event) { return code.onclick.call(this, event, 1); },

onclick2: function(event) { return code.onclick.call(this, event, 2); }

}).main(); } ][0]("test5");

setTimeout(ep014.test5.makeElements, 0);
"OK";

[ahJ4s|1726379914021|Sat Sep 14 2024 22:58:34 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726380031924|Sat Sep 14 2024 23:00:31 GMT-0700 (Pacific Daylight Time)|code]

"Stop propagation during the target phase";
[ function (code) { return (code = {

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    ep014.addClassEventListener(code.testName, "click", code.onclick1, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick2, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick1, false);
    ep014.addClassEventListener(code.testName, "click", code.onclick2, false);
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event, sub)
  {
    var elem_name;
    var msg;

    elem_name = this.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + " sub " + sub + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase
      );
    alert(msg);
    if (!event.this_has_been_stopped && elem_name == "BUTTON" && event.eventPhase == 2)
      {
        event.stopPropagation();
        event.this_has_been_stopped = true;
        alert(code.testName + " sub " + sub + " called stopPropagation");
      }
  },

onclick1: function(event) { return code.onclick.call(this, event, 1); },

onclick2: function(event) { return code.onclick.call(this, event, 2); }

}).main(); } ][0]("test6");

setTimeout(ep014.test6.makeElements, 0);
"OK";

[ahJ4s|1726380031926|Sat Sep 14 2024 23:00:31 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726380157184|Sat Sep 14 2024 23:02:37 GMT-0700 (Pacific Daylight Time)|code]

"Throwing doesn't impede event-handling";
[ function (code) { return (code = {

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    ep014.addClassEventListener(code.testName, "click", code.onclick, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick, false);
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event)
  {
    var elem_name;
    var msg;

    elem_name = this.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase
      );
    alert(msg);
    throw new Error("Some error");
  }

}).main(); } ][0]("test7");

setTimeout(ep014.test7.makeElements, 0);
"OK";

[ahJ4s|1726380157185|Sat Sep 14 2024 23:02:37 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726380213725|Sat Sep 14 2024 23:03:33 GMT-0700 (Pacific Daylight Time)|code]

"A one-time listener in the bubble phase";
[ function (code) { return (code = {

removed: false,

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        /* Reset */
        ep014.addClassEventListener(code.testName, "click", ep014[code.testName].onclick, { once: true });
        ep014[code.testName].removed = false;
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    ep014.addClassEventListener(code.testName, "click", code.onclick, true);
    ep014.addClassEventListener(code.testName, "click", code.onclick, { once: true });
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event)
  {
    var elem_name;
    var msg;

    elem_name = this.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase
      );
    alert(msg);
    code.removed = true;
  }

}).main(); } ][0]("test8");

setTimeout(ep014.test8.makeElements, 0);
"OK";

[ahJ4s|1726380213727|Sat Sep 14 2024 23:03:33 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726380340650|Sat Sep 14 2024 23:05:40 GMT-0700 (Pacific Daylight Time)|code]

"Using a handleEvent object";
[ function (code) { return (code = {

handlerObject:
  {
    message: "hello"
  },

testName: arguments[0],

main:
function main()
  {
    if (ep014[code.testName])
      {
        return ep014[code.testName];
      }
    ep014[code.testName] = code;
    code.handlerObject.handleEvent = code.onclick;
    ep014.addClassEventListener(code.testName, "click", code.handlerObject, true);
    ep014.addClassEventListener(code.testName, "click", code.handlerObject, false);
    return code;
  },

makeElements:
function makeElements()
  {
    var div;
    var logs;

    logs = document.getElementById("logs");
    div = document.createElement("div");
    logs.appendChild(div);
    div.className = code.testName;
    div.innerHTML = "<button class=\"" + code.testName + "\">" + code.testName + "</button>";
  },

onclick:
function onclick(event)
  {
    var elem_name;
    var msg;

    elem_name = event.currentTarget.nodeName.toUpperCase();
    msg =
      (
        "Test-code: " + code.testName + "\n" +
        "Element: " + elem_name + "\n" +
        "Phase: " + event.eventPhase + "\n" +
        "Handler message: " + this.message
      );
    alert(msg);
  }

}).main(); } ][0]("test9");

setTimeout(ep014.test9.makeElements, 0);
"OK";

[ahJ4s|1726380340653|Sat Sep 14 2024 23:05:40 GMT-0700 (Pacific Daylight Time)|value]

OK

[ahJ4s|1726380498787|Sat Sep 14 2024 23:08:18 GMT-0700 (Pacific Daylight Time)|code]

(function(){

var prop;
var props;

props = [];
for (prop in ep014.nonProduction.entries)
  props.push(prop);
props.push("count for click: " + ep014.nonProduction.typeCounts.click);
return props.join("\n");

})();

[ahJ4s|1726380498791|Sat Sep 14 2024 23:08:18 GMT-0700 (Pacific Daylight Time)|value]

test1 click capture
test1 click bubble
test2 click capture
test3 click capture
test4 click capture
test4 click bubble
test5 click capture
test5 click bubble
test6 click capture
test6 click bubble
test7 click capture
test7 click bubble
test8 click capture
test9 click capture
test9 click bubble
count for click: 15