title: event data in pixi.js
body: <p>I just started playing around with pixi and have drawn multiple rectangles from an array with pixel coordinates like this:</p>
  
  <pre><code>var rectangle = [....];
  ....
  
  
  var stage = new PIXI.Stage();
  var renderer = PIXI.autoDetectRenderer(wrapper.getWidth(), wrapper.getHeight(), { transparent: true });
  ....
  
  
  var graphics = new PIXI.Graphics();
  graphics.interactive = true;
  
  
  graphics.on("mouseover", function(e) {
     this.alpha = 0.5;
  
  }).on("mouseout", function() {
     this.alpha = 1;
  
  });
  
  
  graphics.beginFill(0xFFFFFF);
  graphics.lineStyle(2, 0x000000);
  
  
  for (var i = 0; i &lt; rectangle.length; i++) {
     graphics.drawRect(rectangle[i][0], rectangle[i][1], 10, 10);
  
  }
  
  
  graphics.endFill();
  
  
  stage.addChild(graphics);
  renderer.render(stage);
  </code></pre>
  
  <p>The events are triggered but the object I get by "e" or "this" inside the callback is the object for all graphics. I want to get that single "mouseovered" rectangles object I can see in the graphicsData, but there is no id or anything to identify it by. How can I do this?</p>
  
  <p>Performance is of essence as I'm going to render 20k+ rectangles or circles.</p>