为什么自定义事件对我不起作用？ （

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 时，this 引用悬停的

元素，而不是对象推动者。因此，调用 this.fireEvent('in') 将触发

元素上的事件，而不是类对象上的事件。 DOM 事件对象包含指向触发事件的元素的目标。使用这个目标属性，我们可以获取触发事件的元素，然后对其进行动画处理。

旁注：当触发 mouse(over|out) 事件时，this 已经引用了 DOM 对象，因此您不必使用 .bind(el)< 显式绑定它/代码>。

对您的代码进行以下操作：

1. 将事件处理程序绑定到 Pusher 的对象，
2. 使用 event.target 为
3. DOM 元素设置动画

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');            
}