将事件附加到MooTools中的类吗？

Question

我对MooTools相当陌生，我对如何使用它有些困惑，并希望获得一些指导。

例如，在我的应用中，初始化我其中一个类的对象时，它会创建一个div元素。然后将该div放入另一个div。用户可以创建该类的多个实例。我现在想知道如何向该对象添加事件，以便它在被单击，双击等等之后可以做出反应。下面是我创建的类：

var new_Div = new Class({
    initialize: function(name)
    {
        this.newDiv = name + "_div";
        this.newDiv = document.createElement('div');
        this.newDiv.id = this.classDiv;
        this.newDiv.style.width = "200px";
        this.newDiv.style.height = "160px";
        this.newDiv.style.border = "thin red dashed";
        document.body.appendChild(this.newDiv);
    }
});

Div由用户创建并命名，方法是从文本框中获取div ID的输入。然后使用以下代码将generate div插入到主体中，该代码调用initialize（）函数并创建div：

var divName= document.getElementById("newdiv_Input").value;
window[divName+ '_var'] = new new_Div(divName);

然后，可以使用不同的名称创建相同类型的对象。

现在，让我感到困惑的是如何将事件附加到类上。例如，如何创建一个允许每个div左键单击并运行函数的事件，将事件附加到类的问题确实让我感到困惑。有人可以帮我吗？

Answer 1

这实际上取决于您所说的“班级上的事件”是什么意思。您的意思是让类向实例启动事件（通过“事件” mixin），或者让Element激发事件到类/将事件按类附加到dom节点。考虑到这一点，这是一个同时执行以下操作的示例：在类中通过DOM设置通用事件处理程序，并使类通知单击的实例，以便您可以从实例实例中覆盖功能。

关于您在其他主题中的帖子：

var new_Div = new Class({

    // use Options and Events mixins 
    Implements: [Options, Events],

    // define defaults that you can override 
    options: {
        parentNode: document.body, // can point to your input
        injectPosition: "top", // bottom, after (to show after input), before
        width: 200,
        height: 160,
        border: "1px dashed red",
        html: ""
    },

    initialize: function(name, options) {

        // set defaults
        this.setOptions(options);

        // where to inject?
        this.parent = document.id(this.options.parentNode);
        if(!this.parent)
            return; // does not exist - domready?

        // create the element
        this.element = new Element("div", {
            id: name + "_div",
            html: this.options.html,
            styles: {
                width: this.options.width,
                height: this.options.height,
                border: this.options.border
            },
            events: {
                click: this.handleClick.bind(this)
            }
        });

        // inject into dom at the parent node and position
        this.element.inject(this.parent, this.options.injectPosition);
    },

    handleClick: function(event) {
        // called when clicked on the div
        if (event && event.stop)
            event.stop();

        // you can do stuff here
        alert("hi from element event handler");

        // or delegate it to the instance like so:
        this.fireEvent("clicked", event || {});
    }
});

new new_Div("test", {
    html: "hello",
    onClicked: function() {
        // handle the custom "clicked" event on the instance
        alert("hi from class instance event");
    }
});

这里正在工作：http://jsfiddle.net/dimitar/cgDrG/

最后，考虑使用toElement，它允许您将类实例视为dom元素，并直接导出您制作的div-工作示例，对于表单等有用。

var new_Div = new Class({

    // use Options and Events mixins
    Implements: [Options, Events],

    // define defaults that you can override
    options: {
        width: 200,
        height: 160,
        border: "1px dashed red",
        html: ""
    },

    initialize: function(name, options) {

        // set defaults
        this.setOptions(options);

        // create the element
        this.element = new Element("div", {
            id: name + "_div",
            html: this.options.html,
            styles: {
                width: this.options.width,
                height: this.options.height,
                border: this.options.border
            },
            events: {
                click: this.handleClick.bind(this)
            }
        });
    },

    handleClick: function(event) {
        // called when clicked on the div
        if (event && event.stop) event.stop();

        // you can do stuff here
        alert("hi from element event handler");

        // or delegate it to the instance like so:
        this.fireEvent("clicked", event || {});
    },

    toElement: function() { 
        // the class will return this.element if called through $
        return this.element || null;
    }
});

var foo = new new_Div("test", {
    html: "hello",
    onClicked: function() {
        // handle the custom "clicked" event on the instance
        alert("hi from class instance event");
    }
});

// inject this.element through toElement into dom. 
$(foo).inject(document.id("your_name"), "after");

这是在mootools中使用的正确语法，您的代码行并非完全正确的做法。另外，这是您几天来的第二个问题。考虑将您的帐户设为永久帐户并接受一些答案。

这是一个带有迷你验证器类的实际示例，该类将检查必填字段并在不满足的情况下触发错误框类的实例：http://jsfiddle.net/dimitar/cgDrG/5/

Answer 2

而不是给出详细的解释；我将添加到您的代码中，然后让您自然地从那里弄清楚。您应该随意使用它并进行实验。

var new_Div = new Class({
  initialize: function(name)
  {
      this.newDiv = name + "_div";
      this.newDiv = document.createElement('div');
      this.newDiv.id = this.classDiv;
      this.newDiv.style.width = "200px";
      this.newDiv.style.height = "160px";
      this.newDiv.style.border = "thin red dashed";
      document.body.appendChild(this.newDiv);

      // Using the element selector
      // Keep in mind you can only do this once the element has been
      // added to the document body and you can actually see it on the 
      // web page.
      $(this.newDiv.id).addEvents({
        click: function () {
          alert('Put whatever you want to do on click here...');
        }
      });
  }
});

“ $（）”是我所指的元素选择器。您应该对此熟悉。 Mootools的文档很好，因此请花一些时间查找here on the Mootools element和here on mootools events。