Question

我有一个JS对象（使用mootools），它存储了一些DOM元素并附加到它们的事件监听器：

window.myObject = {
    init: function(el1ID, el2ID){
        this.myElement1 = document.getElement(el1ID); 
        this.myElement2 = document.getElement(el2ID);

        this.myElement1.addEvents({
            'click' : function(){
                 myObject.myElement2.innerHTML("foo");
             }
        });
    }

}

现在，仅当我在页面中只有一个对象myObject时才有效。我必须为另一个结构el1ID - el2ID创建另一个对象，我想使这个对象成为一个类并为每个结构实例化一个对象，以便使每个事件处理独立于其他事件。我的问题是：如何在事件处理程序中访问myObject对象的属性？

'click' : function(){
    myElement2.innerHTML("foo")
 }

不起作用

'click' : function(){
    this.myElement2.innerHTML("foo")
 }

会搜索myElement2作为myElement1（又称事件提升者）的属性。我可以做什么而不是静态访问我的对象的属性？

Answer 1

Click事件回调是以元素为中心的，并将元素作为执行上下文触发，即this === myObject.myElement1：

    this.myElement1.addEvents({
        'click' : function(){
             myObject.myElement2.innerHTML("foo");
         }
    });

在MooTools中没有Element.prototype.innerHTML()方法，顺便说一句。它是Element.prototype.set，用作el.set('html', someString);。曾经是1.1x

中的.setHTML()

为了能够访问您的对象，您有几种模式。

    this.myElement1.addEvents({
        'click' : function(e){
             this.set('html', 'foo');
         }
    });

要访问父对象，您可以在变量中重新绑定或保存引用：

    this.myElement1.addEvents({
        'click' : function(e){
             // this === myObject
             this.myElement2.set('html', 'foo');
             // getting to original
             e.target === this.myElement1; // from event object, like currentTarget
         }.bind(this) // <-- binding to outer object instead
    });

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

一个更好的（可以说，我更喜欢它的大部分时间来绑定由于解绑的事件处理程序）模式是保存引用：

init: function(){
    var self = this;
    ...
    this.myElement1.addEvents({
        'click' : function(e){
             // self is orig. this === self.myElement1;
             self.myElement2.set('html', 'foo');
         }
    });
}

就是这样。

访问js-mootools中事件处理程序中的类属性

1 个答案: