将事件附加到 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 的文本框中获取输入来创建和命名。然后使用此代码将生成的 div 插入到主体中，该代码调用initialize() 函数并创建一个 div：

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

这样就允许使用不同的名称创建相同类型的对象。

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

Answer 1

这实际上取决于您所说的“事件到类”的含义。您的意思是，让类向实例触发事件（通过事件混合），或者让元素向类触发事件/按类将事件附加到 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 有很棒的文档，因此请花一些时间查看 这里的 Mootools 元素 和 此处介绍 mootools 事件。