Инициировать действие при программном изменении входного значения

если единственная проблема с вашим решением - нарушение события изменения в наборе значений. Затем вы можете запустить это событие вручную на съемочной площадке. (Но это не будет отслеживать установку, если пользователь изменит ввод через браузер - см. изменить ниже)

<html>
  <body>
    <input type='hidden' id='myInput' />
    <input type='text' id='myInputVisible' />
    <input type='button' value='Test' onclick='return testSet();'/>
    <script>
      //hidden input which your API will be changing
      var myInput=document.getElementById("myInput");
      //visible input for the users
      var myInputVisible=document.getElementById("myInputVisible");
      //property mutation for hidden input
      Object.defineProperty(myInput,"value",{
        get:function(){
          return this.getAttribute("value");
        },
        set:function(val){
          console.log("set");

          //update value of myInputVisible on myInput set
          myInputVisible.value = val;

          // handle value change here
          this.setAttribute("value",val);

          //fire the event
          if ("createEvent" in document) {  // Modern browsers
            var evt = document.createEvent("HTMLEvents");
            evt.initEvent("change", true, false);
            myInput.dispatchEvent(evt);
          }
          else {  // IE 8 and below
            var evt = document.createEventObject();
            myInput.fireEvent("onchange", evt);
          }
        }
      });  

      //listen for visible input changes and update hidden
      myInputVisible.onchange = function(e){
        myInput.value = myInputVisible.value;
      };

      //this is whatever custom event handler you wish to use
      //it will catch both the programmatic changes (done on myInput directly)
      //and user's changes (done on myInputVisible)
      myInput.onchange = function(e){
        console.log(myInput.value);
      };

      //test method to demonstrate programmatic changes 
      function testSet(){
        myInput.value=Math.floor((Math.random()*100000)+1);
      }
    </script>
  </body>
</html>

подробнее о запуске событий вручную

ИЗМЕНИТЬ:

Проблема с запуском события вручную и подходом с мутатором заключается в том, что свойство value не изменится, когда пользователь изменит значение поля из браузера. обходной путь заключается в использовании двух полей. один скрытый, с которым мы можем программно взаимодействовать. Виден другой, с которым пользователь может взаимодействовать. После этого рассмотрения подход достаточно прост.

1. свойство mutate value в скрытом поле ввода, чтобы наблюдать за изменениями и запускать событие onchange вручную. при установленном значении измените значение видимого поля, чтобы дать пользователю обратную связь.
2. при изменении значения видимого поля обновить значение скрытого для наблюдателя.

Следующее работает везде, где я его пробовал, включая IE11 (даже в режиме эмуляции IE9).

Это продвигает вашу идею defineProperty немного дальше, находя объект в цепочке прототипов элемента ввода, который определяет установщик .value, и модифицируя этот установщик для запуска события (в примере я назвал его modified), сохраняя при этом старое поведение.

Когда вы запускаете приведенный ниже фрагмент, вы можете ввести / вставить / еще что-то в поле ввода текста или нажать кнопку, которая добавляет " more" к .value элемента ввода. В любом случае содержимое <span> обновляется синхронно.

Единственное, что здесь не обрабатывается, — это обновление, вызванное установкой атрибута. Вы можете справиться с этим с помощью MutationObserver, если хотите, но обратите внимание, что между .value и атрибутом value нет однозначной связи (последний является просто значением по умолчанию для первого).

// make all input elements trigger an event when programmatically setting .value
monkeyPatchAllTheThings();                

var input = document.querySelector("input");
var span = document.querySelector("span");

function updateSpan() {
    span.textContent = input.value;
}

// handle user-initiated changes to the value
input.addEventListener("input", updateSpan);

// handle programmatic changes to the value
input.addEventListener("modified", updateSpan);

// handle initial content
updateSpan();

document.querySelector("button").addEventListener("click", function () {
    input.value += " more";
});


function monkeyPatchAllTheThings() {

    // create an input element
    var inp = document.createElement("input");

    // walk up its prototype chain until we find the object on which .value is defined
    var valuePropObj = Object.getPrototypeOf(inp);
    var descriptor;
    while (valuePropObj && !descriptor) {
         descriptor = Object.getOwnPropertyDescriptor(valuePropObj, "value");
         if (!descriptor)
            valuePropObj = Object.getPrototypeOf(valuePropObj);
    }

    if (!descriptor) {
        console.log("couldn't find .value anywhere in the prototype chain :(");
    } else {
        console.log(".value descriptor found on", "" + valuePropObj);
    }

    // remember the original .value setter ...
    var oldSetter = descriptor.set;

    // ... and replace it with a new one that a) calls the original,
    // and b) triggers a custom event
    descriptor.set = function () {
        oldSetter.apply(this, arguments);

        // for simplicity I'm using the old IE-compatible way of creating events
        var evt = document.createEvent("Event");
        evt.initEvent("modified", true, true);
        this.dispatchEvent(evt);
    };

    // re-apply the modified descriptor
    Object.defineProperty(valuePropObj, "value", descriptor);
}

<input><br><br>
The input contains "<span></span>"<br><br>
<button>update input programmatically</button>

Мне это нужно только для современных браузеров.

Насколько современным вы хотели бы стать? Ecma Script 7 (окончательный вариант 6 будет сделан в декабре) может содержать Object.observe. Это позволит вам создавать собственные наблюдаемые объекты. И да, вы можете запустить его! Как?

Чтобы поэкспериментировать с этой функцией, вам нужно включить флаг «Включить экспериментальный JavaScript» в Chrome Canary и перезапустить браузер. Флаг можно найти под 'about:flags’

Дополнительная информация: прочитайте это.

Так что да, это очень экспериментально и не готово к текущему набору браузеров. Кроме того, он все еще не полностью готов и не на 100%, если он выйдет на ES7, а окончательная дата ES7 еще даже не установлена. Тем не менее, я хотел, чтобы вы знали для будущего использования.

Поскольку вы уже используете полифиллы для наблюдения/наблюдания и т. д., позвольте мне воспользоваться возможностью и предложить вам Angularjs.

Он предлагает именно эту функциональность в виде своих ng-моделей. Вы можете поместить наблюдателей на значение модели, и когда оно изменится, вы сможете вызывать другие функции.

Вот очень простое, но рабочее решение того, что вы хотите:

http://jsfiddle.net/RedDevil/jv8pK/

По сути, введите текст и привяжите его к модели:

<input type="text" data-ng-model="variable">

затем поместите наблюдатель за моделью angularjs на этот ввод в контроллере.

$scope.$watch(function() {
  return $scope.variable
}, function(newVal, oldVal) {
  if(newVal !== null) {
    window.alert('programmatically changed');
  }
});

Есть способ сделать это. Для этого нет события DOM, однако есть событие javascript, которое срабатывает при изменении свойства объекта.

document.form1.textfield.watch("value", function(object, oldval, newval){})
                ^ Object watched  ^                      ^        ^
                                  |_ property watched    |        |
                                                         |________|____ old and new value

В обратном вызове вы можете делать что угодно.

В этом примере мы можем увидеть этот эффект (см. jsFiddle):

var obj = { prop: 123 };

obj.watch('prop', function(propertyName, oldValue, newValue){
    console.log('Old value is '+oldValue); // 123
    console.log('New value is '+newValue); // 456
});

obj.prop = 456;

При изменении obj активируется прослушиватель watch.

У вас есть дополнительная информация по этой ссылке: http://james.padolsey.com/javascript/monitoring-dom-properties/

Некоторое время назад я написал следующий Gist, который позволяет прослушивать пользовательские события в разных браузерах (включая IE8+).

Посмотрите, как я слушаю onpropertychange в IE8.

util.listenToCustomEvents = function (event_name, callback) {
  if (document.addEventListener) {
    document.addEventListener(event_name, callback, false);
  } else {
    document.documentElement.attachEvent('onpropertychange', function (e) {
    if(e.propertyName == event_name) {
      callback();
    }
  }
};

Я не уверен, что решение IE8 работает в разных браузерах, но вы можете установить фальшивое eventlistener для свойства value вашего ввода и запустить обратный вызов, как только значение value изменится, вызванное onpropertychange.

Это старый вопрос, но с новым объектом JS Proxy запуск события при изменении значения довольно прост:

let proxyInput = new Proxy(input, {
  set(obj, prop, value) {
    obj[prop] = value;
    if(prop === 'value'){
      let event = new InputEvent('input', {data: value})
      obj.dispatchEvent(event);
    }
    return true;
  }
})

input.addEventListener('input', $event => {
  output.value = `Input changed, new value: ${$event.data}`;
});

proxyInput.value = 'thing'
window.setTimeout(() => proxyInput.value = 'another thing', 1500);

<input id="input">
<output id="output">

Это создает прокси-объект JS на основе исходного входного объекта DOM. Вы можете взаимодействовать с прокси-объектом так же, как с исходным объектом DOM. Разница в том, что мы переопределили сеттер. Когда реквизит «значение» изменяется, мы выполняем обычную ожидаемую операцию obj[prop] = value, но затем, если значением реквизита является «значение», мы запускаем пользовательское событие InputEvent.

Обратите внимание, что вы можете запускать любое событие с помощью new CustomEvent или new Event. "изменение" может быть более подходящим.

Узнайте больше о прокси-серверах и пользовательских событиях здесь: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Caniuse: https://caniuse.com/#search=proxy