HTML5画布与KineticJS删除事件侦听器的名字

来源：互联网发布：acca知乎编辑：程序博客网时间：2024/05/18 02:32

与KineticJS删除一个事件侦听器的名字,我们可以命名空间的事件类型on()方法,这样我们可以稍后删除事件监听器通过相同的名称空间off()方法。

产品说明:点击圆看到两个警报触发从两个不同的onclick事件绑定。删除事件侦听器使用左边的按钮,再点击圆圈观察新onclick绑定。

<!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.7.4.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>

0 0