Почему пользовательские события не работают для меня? (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 содержит объект, который ссылается на элемент, инициировавший событие. Используя это целевое свойство, мы можем получить элемент, который вызвал событие, а затем анимировать его.

Боковое примечание: при запуске события mouse (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');    
}