title: adding event to image in EaselJS
body: <p>I was hoping that I could get a little help with something I'm trying to do. I'm learning EaselJS, Extjs but still a little new. I'm trying to create an extJS window, inside the window I added a canvas which I use easelJS to manipulate. On a button1 I added an event handler that will overlay an image... what I am trying to do is make that overlayed image have events. In the long run I'd like to be able to highlight that image, and store the number of overlayed images from mouseclick onto that image.</p>
  
  <p>here is my code</p>
  
  <pre><code> var stage;
  var overlay;
  var overImage;
   var myImage;
  var bgrd;
  Ext.onDocumentReady( function () {
  
  
  
  
      //var myImage = new createjs.Bitmap("dbz.jpg");
      //stage.addChild(myImage);
      //stage.update();
  
  
  
  
      function setBG(){
                myImage = new Image();
                myImage.src = "dbz.jpg";
                bg();
                }
  
      function bg(){
                bgrd = new createjs.Bitmap(myImage);
                stage.addChild(bgrd);
                stage.update();
                }
  
  
  
  
  
  
  
  
  
  Ext.define('EaselWindow', {
  
  width: 1000,
  height: 750,
  extend: 'Ext.Window',
  html: '&lt;canvas id="demoCanvas" width="1000" height="750"&gt;'
      + 'alternate content'
      + '&lt;/canvas&gt;',
  
  afterRender: function() {
      this.callParent(arguments);
  
  
      stage = new createjs.Stage("demoCanvas");
              stage.onload = setBG();
        }, // end after render func
  listeners: {
  
         click: {
             element: 'body',
             fn:    function(){
             var seed = new createjs.Bitmap("seed.jpg");
             seed.alpha = 0.5;
             seed.x = stage.mouseX-10 ;
             seed.y = stage.mouseY-10 ;
             stage.addChild(seed);
             stage.update();
                     } //end addeventlistener
                }
  
           },
  
  
  
  
  
    items:[{ 
         itemId: 'button1',
         xtype: 'button',
         text: 'click the button',
         visible: true,
         enableToggle: true,
  
         toggleHandler:
         function(button, pressed){
             if(button.pressed==true){
                 overImage = new Image();
                 overImage.src = "stuff.jpg";
                 overlay = new createjs.Bitmap(overImage);
  
                 stage.addChild(overlay);
  
                 stage.update();
                 }
              else
               {stage.removeChild(overlay);
               stage.update();
               }
  
          }// end func
  
  
  
  
          },{
          itemId: 'button2',
          xtype: 'button',
          text: 'button2'
  
          }]
  
  }); // end define
  
  Ext.create('EaselWindow', {
  title: "Ext+Easel",
  autoShow: true,
  
   }); //end easelwindow
  
   overImage.addEventListener("mouseover", function(){
                                          overlay.alpha=0.7;
                                          }); // this function isn't working 
  });
  </code></pre>
  
  <p>edit to add:  itemId: 'button2',
              xtype: 'button',
              text: 'addSeed',
              enableToggle: true,
              handler: function(button, pressed){
                 if(button.pressed==true){
                    bgrd.addEventListener('click', function(){<br>
                             seed = new createjs.Bitmap("seed.jpg");
                     seed.alpha = 0.5;
                     seed.x = stage.mouseX-10 ;
                     seed.y = stage.mouseY-10 ;
                             storex= seed.x; 
                             storey= seed.y;
                             console.log(storex +","+ storey);
                             stage.addChild(seed);
                             stage.update();</p>
  
  <pre><code>                       })   
  
                } 
  
             } //end addeventlistener
  </code></pre>
  
  <p>but but once the button is pressed the ability to click remains on if w/ the if statement condition I don't understand why, is there a way to say else ( turn off) </p>