官方範例上會越點越大的例子:
Demo - INTERACTION > Click
// Pointers normalize touch and mouse
sprite.on('pointerdown', onClick);
// Alternatively, use the mouse & touch events:
// sprite.on('click', onClick); // mouse-only
// sprite.on('tap', onClick); // touch-only
app.stage.addChild(sprite);
function onClick() {
sprite.scale.x *= 1.25;
sprite.scale.y *= 1.25;
}
從範例上來看,綁定事件用 on()
但這個 on() 從哪來的?
從 api 文件上搜尋 on 會找不到:
搜尋結果有很多,但包含 VERSION 的 on
也是,顯然不是要找的答案
搜尋 on 出現太多沒必要的結果了,改搜尋 off
結果少多了,但是想要的結果...也是沒有!
換到 gitHub 上繼續搜尋:
on: 146 個
off: 21 個
都不是想要的
再換方法找:
方法 1: 從 console 找原始檔案
方法 2: 從 說明文件/原始檔 找更底層的實作
點 <- f 後,可找到定義這個 on 的地方
找到 EventEmitter 了
再點進去,有個到 eventemitter3 的連結
前半小節:
PixiJS 官方文件的說明不到非常完整,我在找資料時會同時找:
- 官方說明頁
- 官方說明頁的原始檔 (與1. 相同,但比 1. 更詳細)
- GitHub 上的原始檔
繼續討論昨天一次觸發兩次的 Demo:
[ Demo ] - 兔子點一下會印出 pointerdown1
與 pointerdown2
bunny.interactive = true;
bunny.on("pointerdown", (e)=>{
console.log('pointerdown1');
});
bunny.on("pointerdown", (e)=>{
console.log('pointerdown2');
});
使用 EventEmitter類別 的幾個方法測試:
pointerdown
事件註冊了 2 次pointerdown
事件的監聽數量
pointerdown
事件的監聽行為
bunny.eventNames();
bunny.listenerCount("pointerdown");
bunny.listeners("pointerdown");
再測試:
bunny.removeAllListeners();
bunny.eventNames();
重新整理頁面,這次用 once 方法註冊一個 pointerdown
事件:
bunny.once("pointerdown", (e)=>{
console.log('pointerdown3');
});
第一次點兔子:
印出先前註冊的 pointerdown1
、pointerdown2
與剛剛的 pointerdown3
第二次點兔子:
只會印出先前註冊的 pointerdown1
、pointerdown2
後半小節:
補充了 EventEmitter類別 相關的用法、說明文件位置
Next: 既然發現文件的不足,說不定可以發 PR 成為貢獻者?