事件去除MooTools的，和语法事件添加

所以我一直在增加我的事件正是如此：事件去除MooTools的，和语法事件添加

element.addEvent('click', function() { 
    alert('foobar'); 
});

但是，试图删除该事件，这句法相同的代码（有“添加”，当切换到“删除“）不起作用。

element.removeEvent('click', function() { 
    alert('foobar'); 
});

我假设这是因为定义的两个函数没有被引用相同，所以事件在技术上没有被删除。好了，所以我重新定义事件添加和删除：

element.addEvent('click', alert('foobar')); 
element.removeEvent('click', alert('foobar'));

除了现在在页面加载时，被点击甚至在它的点击事件被激发伟大的工程，！

功能被去除，虽然，这是很大的......

来源

2010-08-24 Julian H. Lam

这里是一个jsfiddle： http://jsfiddle.net/wLuY3/ – 2010-08-24 13:12:21

更新：当你做.addEvent('type', function(){ })和.removeEvent('type', function(){ })，即使功能可能具有相同的“签名”，它们是两个separte匿名函数，分配上苍蝇。函数1是！==到函数2 - 因此当MooTools尝试删除它时没有匹配。

能够去除一个确切的处理程序，O：

功能处理器（）{...} el.addEvent（ '点击'，处理程序）; // ..稍后 el.removeEvent（'click'，handler）;

在内部，事件实际上是元素存储中函数的键映射。看看这个小提琴，我做了一段时间回到另一个SO问题 - http://www.jsfiddle.net/mVJDr/

它将检查在给定的元素（或所有事件）上查看特定事件类型的事件数量。

同样，removeEvent寻找事件存储中的匹配 - 看看http://jsfiddle.net/dimitar/wLuY3/1/。因此，使用Nikolaus建议的命名功能可以让您轻松移除它们，因为它提供了匹配。

此外，您可以通过element.removeEvents("click")删除所有click事件的事件。

您的页面现在会发出警报，因为您将alert作为函数传递，并使用参数'foobar'执行它。 METHOD后面跟着() javascript的意思是立即运行METHOD即时排除它，而不是之后。当您将函数绑定到事件时，仅传递引用（方法名称）。

避免使用匿名函数传递参数，就是你可以这样做：

document.id('foobar').addEvent('click', alert.bind(this, 'foo'));

为绑定斥责为你，但除去这将是更加复杂。

为事件委托，它是：

parentEl.addEvents({ 
    "click:relay(a.linkout)": function(e, el) { 

    }, 
    "mouseover:relay(li.menu)": function(e, el) { 

    } 
});

记住它不是很大/非常稳定。对于点击的东西工作正常，mouseenter不会被使用委托，只是鼠标悬停 - 这意味着IE浏览器可以在不应该时触发鼠标。我理解的方式，它的未来在mootools的提高2.0

编辑更新在mootools的显示的一类图形中结合的和未结合的方法的一个例子

http://www.jsfiddle.net/wmhgw/

var foo = new Class({ 
    message: "hi", 
    toElement: function() { 
     return this.element = new Element("a", { 
      href: "http://www.google.com", 
      text: "google", 
      events: { 
       "click": this.bar.bind(this), // bind it 
       "mouseenter": this.bar // unbound -> this.element becomes this 
      } 
     }); 

    }, 
    bar: function(event) { 
     event.stop(); 
     // hi when bound to class instance (this.message will exist) 
     // 'undefined' otherwise. 
     console.log(this.message || "undefined"); 
    } 
}); 

document.id(new foo()).inject(document.body);

所述的mouseenter这里将被解除绑定，其中this将引用默认范围（即触发事件的元素 - a href）。当绑定时，您可以通过event.target获取元素 - 事件对象始终作为参数传递给函数。

顺便说一句，这是一个稍微不太熟悉的类和元素关系的使用，但它符合我的目的来说明类的上下文中的绑定。

来源

2010-08-24 13:43:02

感谢您对js函数的澄清。我不知道追加a（）会导致该函数被执行。很有意思。上述示例中的绑定函数有什么优势吗？它确实是 – 2010-08-24 14:11:52

。这就是为什么你得到这样的匿名闭包：'（function（）{...}）（）;''（）'是创建后运行该函数的东西，给你在javascript中的块范围。至于绑定，它在改变'this'在执行函数中引用的时候很有用。对于mootools，特别是在经常使用类/ oop的情况下，您倾向于将类方法分配给鼠标事件，并在其中尝试将范围保留给类，即在回调函数内，this将是类实例，而不是元素那会被点击 – 2010-08-24 15:03:20

assig功能到一个变量，并使用相同的参考来添加和移除事件。如果您使用匿名函数，你会得到不同的引用

var test = function(){ alert('test: ' + this.id); } 
$('element').addEvent('click', test); 

... 
$('element').removeEvent('click', test);

来源

2010-08-24 13:12:28

的addEvent：上连接事件侦听到DOM元素。

例 -

$('myElement').addEvent('click', function(){ 
    alert('clicked!'); 
});

removeEvent：相当于Element.addEvent，而是删除指定的事件侦听器。

例 -

var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element. 
$('myElement').addEvent('click', destroy); 

//later... 
$('myElement').removeEvent('click', destroy);

当你与一个事件处理程序不是一个匿名函数添加一个事件，如果你比删除事件比将被删除这意味着。

来源

2014-05-20 13:12:24

事件去除MooTools的，和语法事件添加

回答

相关问题