JavaScript puro para escuchar cambios en el valor de entrada

¿Hay alguna manera de que pueda crear una función constante que escuche una entrada, de modo que cuando el valor de la entrada cambie, algo se active inmediatamente?

Estoy buscando algo que use JavaScript puro, sin plugins, sin frameworks y no puedo editar el HTML.

Algo como, por ejemplo:

Cuando cambio el valor en el input MyObject, esta función se ejecuta.

Respuesta #1

Para esto son los eventos.

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

Respuesta #2

Como un ejemplo básico...

HTML :

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

Guion :

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

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

Aquí tienes un fiddle: http://jsfiddle.net/Niffler/514gg4tk/

Respuesta #3

Uso predeterminado

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

Pero, si quieres disparar un evento cuando cambias el valor de los inputs manualmente mediante JavaScript, deberías usar un evento personalizado (cualquier nombre, como 'myEvent', 'ev', etc.). Si necesitas escuchar el evento 'change' o 'input' de los formularios y cambias el valor de los inputs mediante JavaScript, puedes nombrar tu evento personalizado 'change' o 'input', y también funcionará.

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


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

Creación y activación de eventos

Respuesta #4

En realidad, la respuesta marcada es exactamente correcta, pero la respuesta puede estar en la forma ES6:

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

O se puede escribir como se muestra a continuación:

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