iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 9

[Re:PixiJS - Day09] Display Object 可視物件的事件監聽從哪來的?

官方範例上會越點越大的例子:
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 會找不到:

搜尋結果有很多,但包含 VERSIONon 也是,顯然不是要找的答案

搜尋 on 出現太多沒必要的結果了,改搜尋 off

結果少多了,但是想要的結果...也是沒有!

換到 gitHub 上繼續搜尋:
on: 146
off: 21
都不是想要的


可是 bunny 確實有 on 的方法啊?

再換方法找:
方法 1: 從 console 找原始檔案
方法 2: 從 說明文件/原始檔 找更底層的實作


點 <- f 後,可找到定義這個 on 的地方

找到 EventEmitter


若從可視物件最底層的 DisplayObject 物件來找,也發現繼承自 EventEmitter


再點進去,有個到 eventemitter3 的連結

找到了!

前半小節
PixiJS 官方文件的說明不到非常完整,我在找資料時會同時找:

  1. 官方說明頁
  2. 官方說明頁的原始檔 (與1. 相同,但比 1. 更詳細)
  3. GitHub 上的原始檔

EventEmitter 的 API

千辛萬苦找到 on() 的說明

EventEmitter 說明連結就在那了,這邊小介紹幾個方法:

  • emitter.on(eventName, listener) 與 emitter.addListener(eventName, listener) 相同,新增事件監聽
  • emitter.off(eventName, listener) 與 emitter.removeListener(eventName, listener) 相同,移除事件監聽
  • eventNames():列出有註冊的事件
  • listeners(eventName):列出註冊 eventName 的事件
  • listenerCount(eventName):列出註冊 eventName 的事件數量
  • removeAllListeners([eventName]):可一次移除所有事件監聽
  • emitter.once(eventName, listener):註冊一次性監聽,觸發時會執行並移除監聽

繼續討論昨天一次觸發兩次的 Demo:
[ Demo ] - 兔子點一下會印出 pointerdown1pointerdown2

bunny.interactive = true;
bunny.on("pointerdown", (e)=>{
	console.log('pointerdown1');
});
bunny.on("pointerdown", (e)=>{
	console.log('pointerdown2');
});

使用 EventEmitter類別 的幾個方法測試:

  • 列出註冊的事件:陣列長度為 1 ,但 pointerdown 事件註冊了 2
  • 回傳已註冊 pointerdown 事件的監聽數量
  • 回傳已註冊 pointerdown 事件的監聽行為
bunny.eventNames();
bunny.listenerCount("pointerdown");
bunny.listeners("pointerdown");

再測試:

bunny.removeAllListenerCount();
bunny.eventNames();
  • 一次移除所有事件
  • 再次檢查註冊的事件 // 空的


重新整理頁面,這次用 once 方法註冊一個 pointerdown 事件:

bunny.once("pointerdown", (e)=>{
	console.log('pointerdown3');
});


第一次點兔子
印出先前註冊的 pointerdown1pointerdown2 與剛剛的 pointerdown3

第二次點兔子
只會印出先前註冊的 pointerdown1pointerdown2


後半小節
補充了 EventEmitter類別 相關的用法、說明文件位置


Next: 既然發現文件的不足,說不定可以發 PR 成為貢獻者?


上一篇
[Re:PixiJS - Day08] 互動常見問題 - 多次指定事件 / 手機版測試
下一篇
[Re:PixiJS - Day10] 番外篇:成為 PixiJS 的貢獻者
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言