將事件發送到createjs.Stage子級（或一般的JavaScript對象）？

Question

我正在使用EaselJS開發HTML5應用程序，該應用程序使用覆蓋整個窗口的畫布元素來顯示其界面。 我正在使用以下函數修復畫布邊界，以防用戶調整窗口大小：

function resizeCanvas(event) {
  if (window.onresize == null) window.onresize = resizeCanvas;
  canvas.width  = document.body.clientWidth;
  canvas.height = document.body.clientHeight;
  stage.update();
}

但是，當畫布邊界更改時，其某些元素（createjs.Stage（）對象的子元素）也必須更改。 理想情況下，我希望resizeCanvas()簡單地調度一個事件並讓適當的stage.children()對象響應。 我嘗試在上述函數中添加以下行： stage.dispatchEvent(event)並創建如下形狀對象：

var grid = new createjs.Shape(drawGrid());
grid.addEventListener('resize', function(evt) { alert(evt); }, false);
stage.addChild(grid);

但是，這不起作用，似乎我嚴重誤解了事件。

Answer 1

addEventListener()將偵聽對象本身調度的事件，而不是對象接收的事件，因此您的代碼行：

grid.addEventListener('resize', function(evt) { alert(evt); }, false);

將在grid調度一個resize事件時發出alert ，而不是在它收到一個事件時發出alert ，因此您必須使用grid.dispatchEvent('resize')來獲得警報，在這種情況下..您已經有了對象，為什么調度evnt，如果您可以立即調用size-method，則在這種情況下就像是個雞蛋問題，盡管網格中有孩子在聽事件，這還是有道理的。

如果您真的想在這里處理事件，則必須為要調整大小的每個元素添加一個偵聽器到中央對象（可能是stage ），如下所示：

stage.addEventListener('resize', function(evt) { grid.resize(); });
// the grid-object ofc needs a resize-method that handles the event
// also: anonymous functions make this way a complete hassle, but
// you will very likely need the scope of the 'grid' here...

最后，您將需要讓舞台分派resize-event，因此在您添加resizeCanvas()之前執行stage.update()之前，是正確的：

stage.dispatchEvent('resize');
// optionally you can dispatch with an object that contains additional data

---

我會做的事情 （我無法確定這種方法是好是壞，這只是我會做的事情）：我會寫一個遞歸方法來調用每個孩子及其孩子的調整大小方法，由而不是使用事件。