一个按钮的MVC实现不同类型的按钮。按钮元素的循环不会显示div中的所有元素答案

【问题标题】：MVC of a button to implement different types of button.Looping of the button element doesnot display all the elements in div一个按钮的MVC实现不同类型的按钮。按钮元素的循环不会显示div中的所有元素
【发布时间】：2015-06-13 03:02:57
【问题描述】：

我想实现一个按钮的 MVC。我使用创建了一个按钮 var btn = {btnElem : document.createElement('button')} ; 现在我想把这个按钮继承到不同类型的按钮中，比如艺术按钮或逻辑按钮。所以我用这个 btn 对象来获取 arthimetic 按钮var parent = Object.create(btn); var arthButn = {btnElem : parent.btnElem};。现在我想显示从 0-9 数字循环的 arthButn 。但它只显示一个按钮。

    buttonContainer = document.createElement('div');

for(var i=0;i<10;i++){
arthButn.btnElem.innerHTML = i;
buttonContainer.appendChild(arthButn.btnElem);
}

如果我使用 document.createElement('button') 代替 arthButn.btnElem 它工作正常。但在这种方法中，多个元素不会附加到 buttonContainer div。按钮一个接一个地替换，只显示一个按钮。

其他问题是我想将事件处理程序附加到其控制器文件上的 arthbtn。那么如何解决这个问题。

【问题讨论】：

标签： javascript html model-view-controller event-handling javascriptmvc

【解决方案1】：

问题是您没有按预期创建 10 个按钮元素，您只创建了一个。

当你创建基础原型对象时

var btn = { btnElem: document.createElement('button') }
var parent = Object.create(btn);

你创建了一个 DOM 元素。然后创建一个使用btn 对象作为原型的对象

var arthBtn = { btnElem: parent.btnElem }

请注意，arthBtn.btnElem 等于 parent.btnElem，后者通过引用等于 btn.btnElem。因此，在您的循环中，您正在修改同一个 DOM 按钮元素的 innerHTML，然后将同一个元素附加到容器中。

这是一个可能的解决方案：https://jsfiddle.net/oz0ppkm5/。不要使用原型属性，而是使用原型方法，每次调用它都会返回一个新的 DOM 元素。

编辑：这个小提琴更好地说明了如何实现继承：https://jsfiddle.net/o52mn65q/。

【讨论】：

如果我想向arthBtn添加事件监听器，那么我该如何在控制器中提供，以便将其应用于所有按钮？
如果我在每个实例的循环中添加点击事件，它会起作用。但我只想在arthBtn控制器上分配一次点击功能，它应该附加到所有按钮上。 arthBtn.btnElem().addEventListener('click',function(){..},false) 。我该怎么做
这是一个修改后的小提琴，说明了如何做到这一点：jsfiddle.net/235ed0br。我已经展示了如何在控制器类 (click handler) 或每个实例 (mouseover handler) 中定义处理程序。