Czysty JavaScript nasłuchuje zmiany wartości wejściowej

Czy istnieje sposób, w jaki mogę utworzyć stałą funkcję, która nasłuchuje danych wejściowych, więc gdy ta wartość wejściowa się zmienia, coś jest wyzwalane natychmiast?

Szukam czegoś przy użyciu czystego javascript, bez wtyczek, bez frameworków i nie mogę edytować HTML.

Coś, na przykład:

Kiedy zmieniam wartość na wejściu MyObject, ta funkcja działa.

Jakaś pomoc?

Po to są wydarzenia .

HTMLInputElementObject.addEventListener('input', function (evt) {
    something(this.value);
});

Jako podstawowy przykład ...

HTML:

<input type="text" name="Thing" value="" />

Scenariusz:

/* event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);

/* function */
function doThing(){
   alert('Horray! Someone wrote "' + this.value + '"!');
}

Oto skrzypce: http://jsfiddle.net/Niffler/514gg4tk/

Właściwie zaznaczona odpowiedź jest dokładnie poprawna, ale odpowiedź może mieć ES6kształt:

HTMLInputElementObject.oninput = () => {
  console.log('run'); // Do something
}

Lub można napisać jak poniżej:

HTMLInputElementObject.addEventListener('input', (evt) => {
  console.log('run'); // Do something
});

Domyślne użycie

el.addEventListener('input', function () {
    fn();
});

Ale jeśli chcesz uruchomić zdarzenie podczas ręcznej zmiany wartości wejściowych za pomocą JS, powinieneś użyć zdarzenia niestandardowego (dowolna nazwa, np. 'MyEvent' \ 'ev' itp.). i zmieniasz wartości wejściowe za pomocą JS - możesz nazwać swoje zdarzenie niestandardowe „zmiana” \ „wejście” i to też będzie działać.

var event = new Event('input');
el.addEventListener('input', function () { 
  fn();
});
form.addEventListener('input', function () { 
  anotherFn();
});


el.value = 'something';
el.dispatchEvent(input);

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

Innym podejściem w 2020 roku może być document.querySelector():

const myInput = document.querySelector('input[name="exampleInput"]');

myInput.addEventListener("change", (e) => {
  // here we do something
});

Jeśli chcesz monitorować zmiany za każdym razem, gdy naciśniesz klawisz na klawiaturze.

const textarea = document.querySelector(`#string`)
textarea.addEventListener("keydown", (e) =>{
   console.log('test') 
})

zamiast id użyj tytułu, aby zidentyfikować swój element i napisz kod jak poniżej.

$(document).ready(()=>{

 $("input[title='MyObject']").change(()=>{
        console.log("Field has been changed...")
    })  
});