HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>EventTarget() — Counter</title>
</head>
<body>
  <pre id="out"></pre>
  <script>
    class Counter extends EventTarget {
      constructor(initialValue) {
        super();
        this.value = initialValue || 0;
      }
      emitChange() {
        this.dispatchEvent(new CustomEvent("valuechange", { detail: this.value }));
      }
      increment() {
        this.value++;
        this.emitChange();
      }
      decrement() {
        this.value--;
        this.emitChange();
      }
    }
    var lines = [];
    var counter = new Counter(0);
    counter.addEventListener("valuechange", function (e) {
      lines.push("value: " + e.detail);
    });
    counter.increment();
    counter.increment();
    counter.decrement();
    document.getElementById("out").textContent = lines.join("\n");
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

EventTarget() — Counter class (Try It)