避免多次添加事件

Question

我正在动态地将事件添加addEvent("keydown", function() {});到元素中.我的问题是,有时候这个代码会在同一个元素上运行两次或更多次.由于为该事件注册的函数运行了几次,因此行为变得笨拙.

有没有办法让我只在元素上运行一次上面的代码？也许检查之前是否已添加事件？

感谢所有帮助的人.

Answer 1

要么每次都不使用新功能,要么使用课程或其他东西告诉你已经添加了它.

每次都不使用新功能

MooTools的addEvent是一个相当薄的包装addEventListener/ attachEvent,其将不添加相同功能的两倍.因此,如果您确保使用相同的功能,则addEvent无需执行任何操作即可再次呼叫:

// Somewhere it's created **once**
function keyDownHandler() {
    // ....
}

然后:

element.addEvent("keydown", keyDownHandler);    // Adds it only if not there

实例:

addIt();
addIt();

function addIt() {
  $("foo").addEvent("click", handler);
}

function handler() {
  var p = document.createElement('p');
  p.innerHTML = new Date();
  document.body.appendChild(p);
}

<div id="foo">Click me</div>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.0/mootools-yui-compressed.js"></script>

记住你已经添加了它:

if (!element.hasClass("keydown-handler")) {
    element.addClass("keydown-handler").addEvent("keydown", function() { /*...*/});
}

实例:

addIt();
addIt();

function addIt() {
  var element = $("foo");
  if (!element.hasClass("click-handler")) {
    element.addClass("click-handler").addEvent(
      "click",
      function() {
        var p = document.createElement('p');
        p.innerHTML = new Date();
        document.body.appendChild(p);
      }
    );
  }
}

<div id="foo">Click me</div>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.5.0/mootools-yui-compressed.js"></script>