避免多次添加事件

时间:2015-05-15 08:52:08

标签: javascript javascript-events mootools

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

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

感谢所有帮助过的人。

2 个答案:

答案 0 :(得分:5)

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

每次都不使用新功能

MooTools'addEventaddEventListener / 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>

答案 1 :(得分:1)

也许你的问题不在于何时或何时添加事件处理程序,而是如何添加。可以将事件委托给父元素。例如,这是将事件处理程序直接添加到目标元素的经典方法。

new Element( 'p', { 'text': 'Some Text' } ).inject( $( 'container' ) );

$$( '#container p' ).addEvent( 'click', function() {
    console.log( this );            
});

new Element( 'p', { 'text': 'Some Text' } ).inject( $( 'container' ) );

当然,只有第一段有点击事件。

以下是事件委派的示例。

$( 'container' ).addEvent( 'click:relay(p)', function() {
    console.log( this );            
});             

$( 'container' ).adopt([
    new Element( 'p', { 'text': 'Some Text' } ),
    new Element( 'p', { 'text': 'Some Text' } )
]); 

由于事件侦听器被分配给其所有子节点的父节点,因此所有段落都将具有click事件,无论它们何时何地创建。当您动态地向页面添加元素时,它非常有用。

我不知道这有多大帮助,但很高兴知道。

Element.Delegation