0

我一直在学习 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'); }
    });
});

我究竟做错了什么？

4

1 回答 1

2

问题在于这一行：

this.pushIn.bind(el)

当调用 pushIn时，this指的<li>是被悬停的元素，而不是Pusher的对象。所以调用this.fireEvent('in')将触发<li>元素上的事件，而不是你的类的对象。DOM 事件对象包含引用触发事件的元素的目标。使用这个目标属性，我们可以获取触发事件的元素，然后对其进行动画处理。

旁注：当 mouse(over|out) 事件被触发时，this已经引用了 DOM 对象，所以你不必显式地用.bind(el).

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

  1. 将事件处理程序绑定到 Pusher 的对象
  2. 使用 event.target 为<li>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');            
}
于 2010-04-25T17:55:23.200 回答