Question

说，我有两个HTML元素 - 输入字段和按钮。

两者的代码都是以编程方式生成的。

在生成代码之后，我有一个将事件处理程序绑定到这些元素的函数。

//Locate add to order button and bind event handler to it
this.input_add = document.getElementById("add_to_order");
this.input_add.onclick = 
    function () {
        return controller.addToOrder.call(controller);
    };

// Locate quantity input and bind event handler to it
this.input_quantity = document.getElementById("form_quantity");
this.input_quantity.onkeyup = 
    function () {
        return controller.changeQuantity.call(controller, this);
    };

这就是谜题 - controller.changeQuantity 需要引用 this.input_add 。

据我所知，我无法将 this.input_add 传递到 controller.changeQuantity 的调用参数列表中。

我发现只有一个解决方案 - 在 this.input_quantity 对象中引用 this.input_add 。

this.input_quantity.addButton = this.input_add

还有其他选择吗？这是一个好习惯吗？我试图让我的应用程序尽可能分离。

Answer 1

将DOM对象添加到“控制器”，并将事件处理程序设置为该对象的一部分，如：

var controller = { ... };
controller.input_add = document.getElementById("add_to_order");
controller.input_quantity = document.getElementById("form_quantity");

controller.input_add.onclick = function() { controller.addToOrder.call(controller, this);}

然后，您可以随时从控制器对象中引用这些DOM元素。

我经常在我的主Javascript控制器对象的设置代码中设置对DOM元素的引用，注册事件处理程序等。

我如何以编程方式为JS事件处理程序提供对其他HTML元素的引用？

1 个答案: