HTML5 Canvas Remove Event Listener by Name with Konva

To remove an event listener by name with Konva,
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.

Konva Remove By Name Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Remove Event Listener by Name Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }

      #buttons {
        position: absolute;
        top: 5px;
        left: 10px;
      }
    </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>
      function writeMessage(message) {
        text.text(message);
      }

      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
      });

      var layer = new Konva.Layer();

      var circle = new Konva.Circle({
        x: stage.width() / 2,
        y: stage.height() / 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>

Enjoying Konva? Please consider to support the project.