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

Divs由用户创建并命名，方法是从文本框中输入divs id。然后使用此代码将generate div插入到body中，该代码调用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中使用的正确语法，你的行不是很好的做法。此外，这是你在很多天内的第二个问题。考虑将您的帐户设为永久帐户并接受一些答案。

这是一个实用示例，其中包含一个mini validator类，用于检查必填字段并在不满足时触发错误框类的实例：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。

将事件附加到MooTools中的类？

2 个答案: