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

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

用户通过从Divs id的文本框中获取输入来创建和命名div。然后使用调用initialize（）函数并创建div的以下代码将generate div插入到主体中：

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

这样就可以使用不同的名称创建相同类型的对象

---

现在我感到困惑的是如何将事件附加到类中。例如，我如何创建一个允许左键单击每个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);

      // 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有很好的文档，所以请花些时间查看和修改。

这实际上取决于您所说的事件到类的含义。您的意思是，让类向实例激发事件（通过事件mixin），或者让元素向类激发事件/按类将事件附加到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");
    }
});

这就是它的工作原理：

最后，考虑使用，它允许您将类实例视为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中使用的正确语法，您的行并不是很好的实践。还有，这是你最近的第二个问题。考虑把你的账户永久化并接受一些答案。

---

下面是一个小型验证器类的实际示例，该类检查必填字段，如果不满意，则触发错误框类的实例：

感谢您的回复，但我似乎收到FireBug的错误消息，说“addEvent不是函数”。您是否执行了addEvents，这意味着找不到元素。在这种情况下，$（）返回

null

。确保

这个.newDiv.id

在您的DOM中。您还可以使用

$（this.newDiv）

，因为$（）也接受元素实例。您甚至可以执行

this.newDiv.addEvent（…）

，但这在IE上不起作用，因此应该使用$。