代码之家 › 专栏 › 技术社区 › John McCollum

为什么自定义事件对我不起作用?(MOOTooS)

mootools javascript-events javascript

John McCollum · 技术社区 · 15 年前

我一直在学习moootools,但在启动自定义事件时遇到了问题。我相信这一定是件简单的事情,但我一辈子都看不到它。

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

我做错什么了?

1 回复 | 直到 15 年前

Anurag 15 年前

这一行有问题:

this.pushIn.bind(el)

什么时候? 推挤被称为这指的是 <li> 悬停的元素,而不是推杆 . 如此呼唤 this.fireEvent('in') 将在 <理工大学; 元素,而不是类的对象。dom事件对象包含引用触发事件的元素的目标。使用这个目标属性,我们可以获取触发事件的元素,然后对其进行动画处理。

旁注:当鼠标(超出)事件被触发时, this 已经引用了DOM对象,因此不必使用 .bind(el) .

对代码进行了以下操作:

将事件处理程序绑定到pusher对象
使用event.target为 <理工大学; 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');            
}