Как программно предоставить обработчику событий JS ссылки на дополнительные элементы HTML?

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_add в объекте this.input_quantity .

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 из вашего объекта контроллера в любой точке.

Я часто устанавливаю ссылки на элементы DOM, регистрирую обработчики событий и т. Д. В коде установки для моего основного объекта контроллера Javascript.