使用事件处理程序创建javascript对象

我创建了一个JavaScript对象，并将其命名为“Button”。这个对象有一个函数，可以绘制一个按钮并将其附加到特定的div元素

  var Button = function (id, value) {
        this.id = id;
        this.value = value;           

        this.draw = function () {
            var element = document.createElement("input");
            element.type = "button";
            element.id = id;
            element.value = value;               
            document.getElementById("topDiv").appendChild(element);
        }
    };

我实例化Button对象并调用draw（）函数，如下所示：

 var myButton = new Button('btn1', "Test Button");
 myButton.draw();

我的问题是我不能处理事情。我想将onclick事件连接到函数。例如：

myButton.onClick = function(){ alert(1); };

---

但是我不知道如何定义它。

您必须创建自己的click（）方法（该方法将函数作为参数）绑定到DOM元素的click处理程序。draw（）方法可以在对象实例中存储对元素的引用，以便click（）方法可以访问它

如前所述，您应该将事件附加到DOM对象

简单的方法就是从自定义类中公开DOM元素：

var Button = function (id, value) {
    this.id = id;
    this.value = value;

    var element = document.createElement("input");
    this.element = element;           

    this.draw = function () {
        element.type = "button";
        element.id = id;
        element.value = value;               
        document.getElementById("topDiv").appendChild(element);
    }
};

现在您可以：

 var myButton = new Button('btn1', "Test Button");
 myButton.draw();
 myButton.element.onclick = function(){ alert(1); };

---

如果本机Javascript

document.getElementById("btn1").onclick

如果jQuery

$('#btn1').click(//function(){})....

如果jQuery but按钮是动态创建的。。。。 你可以试试

$('#btn1').live('click',//function(){ })....

编辑：如评论中所建议： 请阅读文档内容：

从jQuery1.7开始，不推荐使用.live（）方法。使用.on（）来 附加事件处理程序。jQuery旧版本的用户应使用 .delegate（）优先于.live（）

此方法提供了将委托事件处理程序附加到 页面的文档元素，它简化了事件处理程序的使用 将内容动态添加到页面时。参见对 有关详细信息，请参见.on（）方法中的直接事件与委派事件 信息

根据继承方法重写.live（）方法很简单；以下是所有三种事件附件方法的等效调用模板：

附加的 如果你不能生活没有-生活-

从jQuery 1.4开始，.live（）方法支持自定义事件以及 所有出现气泡的JavaScript事件。它还支持某些事件 不冒泡，包括更改、提交、聚焦和模糊

试一试

---

演示：

我知道这是一个老问题，但值得一提的是，您可以在附加到div之后完成：

document.getElementById("topDiv").appendChild(element);
this.element.onclick = function(){ alert(1);};

这更加一致，编码更少。

---

您在此处“附加”JavaScript对象上的事件–您希望将其附加到DOM元素（在

draw

方法中为

element

）。因此，您必须提供对该元素的外部访问（使其成为公共属性f.e.）——或者，如果您需要对所有这些按钮进行相同的事件处理，则在创建元素时，只需将处理程序附加到按钮函数中即可。默认情况下，我不希望onclick事件创建。我希望它在我想创建的时候创建。我确实可以访问对象构造函数中的元素。我有它的名字。var元素=document.getElementById（id）；element.onclick=function（）{alert（'blah blah'）；}；这很有效。顺便说一句，我想传递一个函数，当我按下按钮时，我的特定函数会调用。@Azade:是的，它只是

document.getElementById（myButton.id）。onclick=…

然后。避免使用live。它已被弃用，性能很差。我正在尝试创建一个JavaScript库。我不想使用document.getElementById。。。或者任何这些。@ertrne你说避免苏打水是好的。。。喝-水-取而代之。。是啊，他要避免像苏打水一样“活着”。。。。要喝什么水呢？？。文档中说：--从jQuery1.7开始，.live（）方法已被弃用。使用.on（）附加事件处理程序。较旧版本的jQuery用户应优先使用.delegate（），而不是.live（）。此方法提供了将委托事件处理程序附加到页面的文档元素的方法，从而简化了在将内容动态添加到页面时事件处理程序的使用。“---如果他仍在使用jQ<17….没有什么害处..我不想将我的处理程序作为参数发送。我希望它被赋值。比如myButton.click=function（）{…}；顺便说一句，它很有用。

var Button = function (id, value) {
    this.id = id;
    this.value = value;           

    this.draw = function () {
        this.element = document.createElement("input");
        this.element.type = "button";
        this.element.id = id;
        this.element.value = value;               
        document.getElementById("topDiv").appendChild(this.element);
    }
};

Button.prototype.addEventListener = function(event, handler){
    var el = this.element;
    if(!el){
        throw 'Not yet rendered';
    }
    if (el.addEventListener){
        el.addEventListener(event, handler, false); 
    } else if (el.attachEvent){
        el.attachEvent('on' + event, handler);
    }
}

document.getElementById("topDiv").appendChild(element);
this.element.onclick = function(){ alert(1);};