为什么自定义活动对我不起作用？ （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>元素，而不是 Pusher 的对象。因此，调用this.fireEvent('in')会触发<li>元素上的事件，而不是您的类对象。 DOM事件对象包含引用触发事件的元素的目标。使用此target属性，我们可以获取触发事件的元素，然后为其设置动画。

附注：当触发鼠标（over | out）事件时，this已经引用了DOM对象，因此您不必使用.bind(el)显式绑定它。

为您的代码做了以下事情：

1. 将事件处理程序绑定到Pusher的对象
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');            
}