Question

所以我一直在添加我的活动：

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

但是，在尝试删除所述事件时，这个语法相同的代码（“add”切换为“remove”）不起作用。

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

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

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

哪个效果很好，除非现在页面加载，点击事件甚至在点击之前就被触发了！

这个功能被删除了，这很棒......

Answer 1

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

能够删除精确的处理程序，o：

function handler（）{...} el.addEvent（'click'，handler）; // ..稍后 el.removeEvent（'click'，handler）;

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

它将检查在任何给定元素（或所有事件）上为特定事件类型堆叠了多少事件。

类似地，removeEvent在事件存储中查找匹配项 - 查看http://jsfiddle.net/dimitar/wLuY3/1/。因此，使用像Nikolaus建议的命名函数可以让你轻松删除它们，因为它提供了匹配。

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

您的页面现在会发出警报，因为您将警报作为函数传递，并使用params'foobar'执行它。在javascript中METHOD后跟()意味着立即运行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) {

    }
});

更多关于此http://mootools.net/docs/more/Element/Element.Delegation#Element:removeEvent

请记住，它不是很好/非常稳定。适用于点击的东西，mouseenter不会被委托使用，只是鼠标悬停 - 这意味着IE可以在不应该的情况下触发mouseout。我理解它的方式，它在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获取元素 - 事件对象始终作为参数传递给函数。

顺便说一句，这是对类和元素关系稍微不太熟悉的用法，但它在这里用于说明在类的上下文中的绑定。

Answer 2

将函数赋值给变量并使用相同的引用来添加和删除事件。如果您使用匿名函数，您将获得不同的引用

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

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

Answer 3

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);

这意味着当您使用事件处理程序而不是匿名函数添加事件时，如果删除事件而不是删除事件。

Mootools中的事件删除，以及事件添加的语法

3 个答案: