Как отследить изменение input.value, если его меняет другая функция?

Question

[Mesuti]

Привет!
На input .two висит обработчик, оформляющий value.
Как его запускать, если его value вдруг поменяет функция от input.one?

Answer 1

[Aetae]

Правильный ответ: писать код предусматривающий подобные вещи через абстракции. Тебе не надо триггерить события, ты должен при установке значения напрямую вызывать нужные функции. Ты сам знаешь что у тебя в коде происходит и какие функции привязаны к событиям, тебе не нужно ждать событий от браузера.
Полезный ответ: использовать любую библиотеку умеющую в data binding, которая будет заботится о таких вещах за тебя. Мне лично нравится Vue, но есть и множество решений по-проще и по-традиционней.
Плохой ответ: ты можешь добиться этого примерно таким извращением, подменив стандартный сеттер на value:

const valueDescriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(two, 'value', {
  ...valueDescriptor, 
  set(value) {
    valueDescriptor.set.call(this, value);  
    this.dispatchEvent(new Event('input', {
      bubbles: true,
      cancelable: true,
    }));
  } 
})