HTML5 Canvas Event Delegation with KineticJS

To get the event target with KineticJS, we can access the targetNode property of the Event object. This is particularly useful when using event delegation, in which we can bind an event handler to a parent node, and listen to events that occur on its children.

Instructions: Click on the star and observe that the layer event binding correctly identifies the shape that was clicked on.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.5.2-beta.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

var star = new Kinetic.Star({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        numPoints: 15,
        innerRadius: 40,
        outerRadius: 70,
        fill: 'blue',
        scale: {
          x: 2,
          y: 0.5
        },
        name: 'my star'
      });

layer.on('click', function(evt) {
        // get the shape that was clicked on
        var shape = evt.targetNode;
        alert('you clicked on \"' + shape.getName() + '\"');
      });

layer.add(star);
      stage.add(layer);
    </script>
  </body>
</html>

< Cancel Propagation Fire Events >

More Examples

Modified on April 9th, 2013 by Eric Rowell