HTML5 Canvas Remove Event Listener by Name with KineticJS

To remove an event listener by name with KineticJS, we can namespace the event type with the on() method so that we can later remove the event listener by the same namespace with the off() method.

Instructions: Click on the circle to see two alerts triggered from two different onclick event bindings. Remove the event listeners using the buttons to the left, and again click on the circle to observe the new onclick bindings.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #buttons {
        position: absolute;
        left: 10px;
        top: 0px;
      }
      button {
        margin-top: 10px;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <button id="remove1">
        Remove First Listener
      </button>
      <button id="remove2">
        Remove Second Listener
      </button>
      <button id="removeAll">
        Remove All Listeners
      </button>
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2 + 10,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

circle.on('click.event1', function() {
        alert('First Listener');
      });
      circle.on('click.event2', function() {
        alert('Second Listener');
      });

layer.add(circle);
      stage.add(layer);

document.getElementById('remove1').addEventListener('click', function() {
        circle.off('click.event1');
        alert('First onclick removed');
      }, false);

document.getElementById('remove2').addEventListener('click', function() {
        circle.off('click.event2');
        alert('Second onclick removed');
      }, false);

document.getElementById('removeAll').addEventListener('click', function() {
        circle.off('click');
        alert('All onclicks removed');
      }, false);
    </script>
  </body>
</html>

< Remove Event Custom Hit Region >

More Examples

Modified on April 9th, 2013 by Eric Rowell