动态创建元素上的类中的JavaScript事件

我有以下课程，但遇到了两个问题：

我只能让它在现有元素上工作，但我需要为以后将动态创建的元素声明它。我认为需要对eventlistener进行检查，也许还需要使用MutationObserver。。。而现在我已经远远超出了我的能力范围

如果我确实为两个确实存在的元素创建了两个条实例，那么当我mousedown或mouseup时，它们似乎指向同一个元素。我相信这是因为我使用的是一个原型，而不是这个。但是如果我用这个，它就不能工作了。mousedown=func。。。相反

var bar=（函数（）{
var me=这个；
功能条（id）{
我。_id=id；
}
bar.prototype.mousedown=函数（代码）{
el（）.addEventListener（'mousedown'，code，false）；
归还这个；
}
bar.prototype.mouseup=函数（代码）{
el（）.addEventListener（'mouseup'，code，false）；
归还这个；
}
this.el=函数（）{
返回文档.getElementById（me.\U id）；
};
this.css=function（）{
返回el（）样式；
};
返回杆；
})();
var me=this：此处，
此
指的是
窗口
变量，因为您不在对象内部。因此，当您创建另一个
bar
（函数声明的第3行）实例时，
me.\u id=id覆盖上一个id，因为
此
引用未更改

使用更面向对象的方法


var bar=函数（id）{
这个.id=id；
}
bar.prototype.element=function（）{
return document.getElementById（this.id）；
}
bar.prototype.css=function（）{
返回此.element（）.style；
}
bar.prototype.mousedown=函数（代码）{
var=这个；
this.element（）.addEventListener（'mousedown'，函数（e）{
代码（该代码）；
}，假）；
归还这个；
}
bar.prototype.mouseup=函数（代码）{
var=这个；
this.element（）.addEventListener（'mouseup'，函数（e）{
代码（该代码）；
}，假）；
归还这个；
}
函数foo（s）{
退回新酒吧；
}
福（“蝙蝠侠”）
穆斯敦先生(
功能（obj）{
obj.css（）.background=“绿色”；
}
)
穆塞普先生(
功能（obj）{
obj.css（）.background=“橙色”；
}
);
foo（“蝙蝠侠2”）
穆斯敦先生(
功能（obj）{
obj.css（）.background=“绿色”；
}
)
穆塞普先生(
功能（obj）{
obj.css（）.background=“橙色”；
}
);
.mydiv{
背景色：#e72629；
填充物：5px；
颜色：#ffffff；
文本对齐：居中；
}

JS-Bin
你好，世界！
你好，世界2！
非常感谢，这正是我需要的，而且看起来好多了。一个动态装箱的元素呢，一个还不存在的元素。现在添加foo（“蝙蝠侠3”），没有任何html代码就会抛出错误。@Jason此代码应该适用于动态创建的元素，因为它通过
document.getElementById（）
按id获取元素。检查这里，我在JS代码中将蝙蝠侠2重命名为蝙蝠侠3。html中没有这样的元素，它会在控制台中抛出错误@Jason然后只需检查
element（）
是否返回
undefined
。谢谢。我用我以前的代码做到了这一点，但它不起作用，但它能用你给我的代码工作。。完美的非常感谢。