Why does Pixijs use different elements for PointerEvent listeners?

24 Views Asked by At

I'm learning the source code of Pixijs, and I came across the part related to PointerEvent:

self.document.addEventListener('pointermove', this.onPointerMove, true);
this.domElement.addEventListener('pointerdown', this.onPointerDown, true);
this.domElement.addEventListener('pointerleave', this.onPointerOverOut, true);
this.domElement.addEventListener('pointerover', this.onPointerOverOut, true);
self.addEventListener('pointerup', this.onPointerUp, true);

Source: EventSystem.ts#L371-L390

This code looks strange to me and I have some questions:

  1. Why does it attach event listeners to three different elements (self, self.document, and this.domElement)?
  2. I can understand the difference between self and this.domElement, but what is the difference between self and self.document?
  3. Why does it use self instead of window? Is it for running in Web Worker?
  4. Finally, what is the best practice for using PointerEvent? Which events should be attached to canvas (this.domElement), and which should be attached to window/document? And which one should I use between window and document?

I appreciate any help or explanation. Thanks in advance.

0

There are 0 best solutions below