爲什麼自定義事件不適合我？ （Mootools）

Question

我一直在學習Mootools，但我在解決自定義事件時遇到問題。我確信它一定是簡單的，但我無法看到它在我的生活中。

我寫了一個簡單的類來使用Fx.Tween來推動一些列表項。它完美的工作，除了自定義事件沒有被觸發，無論我嘗試什麼。

<script type="text/javascript"> 
    var Pusher = new Class({ 
     Implements: [Events,Options], 
     options: { 
      elements: [] 
     }, 

     initialize: function(options){ 
      this.setOptions(options); 
      this.attachListeners(this.options.elements); 
     }, 

     attachListeners: function(elements){ 
      $$(elements).each(function(el){ 
       $(el).addEvent('mouseover', this.pushIn.bind(el)) 
        .addEvent('mouseout', this.pushOut.bind(el)); 
      }, this); 
     }, 

     pushIn: function(){ 
      this.fireEvent('in'); 
      this.set('tween', {duration: 'short'}); 
      this.tween('paddingLeft', '50px'); 
     }, 

     pushOut: function(){ 
      this.fireEvent('out'); 
      this.set('tween', {duration: 'short'}); 
      this.tween('paddingLeft', '0px');    
     } 
    }); 

    window.addEvent('domready', function(){ 
     var p = new Pusher({ 
      elements: $$('li') 
     }); 
     p.addEvent('in', function(){ alert('in'); }); 
     p.addEvent('out', function(){ alert('out'); }); 
    }); 
</script> 

而在HTML：

<ul id="mylist"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul> 

我也試過如下：

window.addEvent('domready', function(){ 
    var p = new Pusher({ 
     elements: $$('li'), 
     onIn: function(){ alert('in'); }, 
     onOut: function(){ alert('out'); } 
    }); 
}); 

我在做什麼錯？

Answer 1

問題是與這一行：

this.pushIn.bind(el) 

當PUSHIN被調用時，這個指<li>元件這是盤旋的，而不是推杆式的對象。所以調用this.fireEvent('in')將在<li>元素上觸發事件，而不是您的類的對象。 DOM事件對象包含引用觸發事件的元素的目標。使用此目標屬性，我們可以獲取觸發事件的元素，然後爲其設置動畫。

注意：當觸發鼠標（over | out）事件時，this已經引用了DOM對象，因此您不必將其與.bind(el)明確綁定。

做了如下的事情代碼：

1. 綁定的事件處理程序推
的反對
2. 使用event.target到動畫<li> DOM元素

example on jsf

attachListeners: function(elements){ 
    $$(elements).each(function(el){ 
     $(el).addEvent('mouseover', this.pushIn.bind(this)) 
      .addEvent('mouseout', this.pushOut.bind(this)) 
    }, this); 
}, 

pushIn: function(event) { 
    this.fireEvent('in'); 
    var item = event.target; 
    item.set('tween', {duration: 'short'}); 
    item.tween('paddingLeft', '50px'); 
}, 

pushOut: function(event){ 
    var item = event.target; 
    this.fireEvent('out'); 
    item.set('tween', {duration: 'short'}); 
    item.tween('paddingLeft', '0px');    
}