事件去除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的，和語法事件添加

回答

相關問題