title: KineticJS: Select element by type
body: <p>I am iteratively drawing circles using KineticJS and HTML5.  I'd like to detect mousemove on any circle and get the id of the circle that's selected.  I know you can select elements by name or id, but how can I select elements by type (circles)?  With the code below, it only responds to the last circle (because it's the last declared "circle"), but I'm not sure how to change it to respond to all circles.</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
  &lt;/head&gt;
  
      &lt;div id="container"&gt;&lt;/div&gt;
          &lt;script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              var startX = 200;
              var startY = 100;
              var radius = 10;
  
              var stage = new Kinetic.Stage({
                  container: 'container',
                  width:400,
                  height:500
              });
  
              for(i=0; i&lt;10; i++){
                  window['circle'+i];
              }
  
              var layer = new Kinetic.Layer();
  
              for (i=0; i&lt;10;i++){
                  var circle = new Kinetic.Circle({
                      x: startX,
                      y: startY,
                      radius: radius,
                      fill: '#CCCCCC',
                      stroke: '#999',
                      strokeWidth: 4,
                      name: 'step'+i
                  });
  
                  layer.add(circle);
  
                  var stepName = new Kinetic.Text({
                      x: startX + radius*2.5,
                      y: startY-7.5,
                      text: "circle"+i,
                      fontSize: 15,
                      fontFamily: 'Calibri',
                      fill: 'black'
                  });
  
                  layer.add(stepName);
                  stage.add(layer);
  
                  startY = startY + radius*3.5;
              }
  
              circle.on('mousemove', function(){
                  var shapeName = this.getName();
                  console.log(shapeName);
              })
  
          &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>