Event Delegation API ideas

0-element-based-API.idl

// Element delegates to worker/worklet

interface EventDelegate {};
interface EventTarget {
  void addEventDelegate(DOMString type?, EventDelegate delegate, EventDelegateOptions options?);
  void removeEventDelegate(DOMString type?, EventDelegate delegate);
};

dictionary EventDelegateOptions {
  boolean preventDefault = false;
  boolean stopPropagation = false;
  boolean stopImmediatePropagation = false;
};

interface Worker: EventDelegate {};
interface WorkletAnimation: EventDelegate {};
interface AudioWorkletNode : EventDelegate {};

1-element-based-API-example.js

// index.js
const myWorker = new Worker("worker.js");
document.getElementById("div1").addEventDelegate('pointermove', worker);
document.getElementById("div2").addEventDelegate('pointermove', worker);


await CSS.animationWorklet.addModule('animator.js');
const animation = new WorkletAnimation('follow-my-touch', ....).play(); 
document.getElementById("div3").addEventDelegate(['pointerdown', 'pointermove', 'pointerup'] , animation);


// worker.js
self.addEventListener("pointermove", (event) => {
  console.log(event.clientX, event.clientY);
});

// animator.js

registerAnimator('follow-my-touch', class FooAnimator {
  constructor() {
    this.addEventListener('pointerdown', (e) => {console.log(e);};
    this.addEventListener('pointermove', (e) => {
      this.coords = {e.clientX, e.clientY}
      this.requestAnimation();
    };
    this.addEventListener('pointerup', (e) => {this.coords = undefined;};
  }
  animate(currentTime, effects){
    if (this.coords) {
      effects.children()[0].localTime = translateCoordinateToTime(this.coords.clientX);
      effects.children()[0].localTime = translateCoordinateToTime(this.coords.clientY);
    }
  }
});
  

2-worker-based-API.idl

interface EventDelegate {
  // Should this accept a list of targets?
  void addEventTarget(EventTarget target, EventDelegateOptions options?);
  void removeEventTarget(EventTarget target);

};

dictionary EventDelegateOptions { /* allows adding options in future */ };

interface Worker: EventDelegate {};
interface WorkletAnimation: EventDelegate {};
interface AudioWorkletNode : EventDelegate {};

3-worker-based-API-example.js

// index.js
const myWorker = new Worker("worker.js");
worker.addEventTarget(document.getElementById("div1"));
worker.addEventTarget(document.getElementById("div2").);


// worker.js

self.addEventListener("eventtargetadded", (target) => {
    target.addEventListener("pointermove", (e) => {/* Handle event e */}
});