为什么自定义事件不适合我？ （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');    
}