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:
- Why does it attach event listeners to three different elements (
self,self.document, andthis.domElement)? - I can understand the difference between
selfandthis.domElement, but what is the difference betweenselfandself.document? - Why does it use
selfinstead ofwindow? Is it for running in Web Worker? - Finally, what is the best practice for using PointerEvent? Which events should be attached to canvas (
this.domElement), and which should be attached towindow/document? And which one should I use betweenwindowanddocument?
I appreciate any help or explanation. Thanks in advance.