2

我有一个 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除了静态访问我的对象的属性，我还能做什么？

4

1 回答 1

2

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

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

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

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

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

就是这样。

于 2013-09-27T19:10:44.887 回答