Evento "onchange" di trigger

L'evento "onchange" viene attivato solo quando USER inserisce un valore. Perché non è possibile attivare l'evento quando cambio il valore automaticamente tramite Javascript? C'è un'alternativa?Evento "onchange" di trigger

Animazione:

enter image description here

Codice:

<!DOCTYPE html> 

<html> 
    <head> 
     <script> 
      document.addEventListener ("DOMContentLoaded", function() { 
       var input = this.getElementsByTagName ("input")[0]; 
       var div = this.getElementsByTagName ("div")[0]; 
       var i = 0; 
       var seconds = 5; 

       div.innerHTML = "The following input should fire the event in " + seconds + " seconds"; 

       var interval = window.setInterval (function() { 
        i ++; 

        if (i === seconds) { 
         window.clearInterval (interval); 

         input.value = "Another example"; 

         div.innerHTML = "Nothing ! Now try change the value manually"; 
        } 
        else { 
         div.innerHTML = "The following input should fire the event in " + (seconds - i) + " seconds"; 
        } 
       }, 1000); 

       input.addEventListener ("change", function() { 
        alert ("It works !"); 
       }, false); 
      }, false); 
     </script> 

     <style> 
      body { 
       padding: 10px; 
      } 

      div { 
       font-weight: bold; 
       margin-bottom: 10px; 
      } 

      input { 
       border: 1px solid black; 
       border-radius: 3px; 
       padding: 3px; 
      } 
     </style> 

     <title>Event</title> 
    </head> 

    <body> 
     <div></div> 
     <input type = "text" value = "Example" /> 
    </body> 
</html>

Grazie

fonte

2012-01-09 Caio

È necessario attivare manualmente l'evento dopo aver modificato il valore. Vedi questa domanda: http://stackoverflow.com/q/2490825/615754 – nnnnnn

quando si modifica il valore di input con javascript perché non si attiva anche qualche evento? perché vuoi usare onchange? l'onchange è per l'input dell'utente il resto che puoi gestire da solo. – ggzone

La stragrande maggioranza del tempo, non si vuole un evento per essere licenziato quando cambi il valore con il codice. Nei casi in cui lo fai, puoi attivare un evento sintetico sui browser moderni tramite dispatchEvent. More here.

Quindi nel tuo esempio specifico:

input.value = "Another example"; 
var event = document.createEvent("UIEvents"); // See update below 
event.initUIEvent("change", true, true);  // See update below 
input.dispatchEvent(event);

Live demo

Aggiornamento: Come Benjamin noted, dal momento che quanto sopra è stato scritto, initUIEvent è stato sostituito con il UIEventcostruttore, in modo che sarebbe :

input.value = "Another example"; 
var event = new UIEvent("change", { 
    "view": window, 
    "bubbles": true, 
    "cancelable": true 
}); 
input.dispatchEvent(event);

Live demo

In alternativa, è sempre possibile chiamare direttamente qualsiasi funzione associata all'evento change, che di solito è ciò che farei. Ma a volte si desidera utilizzare eventi reali (ad esempio, quando si utilizza il modello di osservatore) e assicurarsi che tutti coloro che ascoltano la modifica vengano avvisati.

fonte

2012-01-09 13:56:23

Sto usando la tua risposta aggiornata e funziona come un incantesimo, ma rende la mia app troppo lenta, la stessa azione quando viene eseguita con il trigger di jQuery(), è veloce. Quale potrebbe essere la ragione? e come posso migliorare le prestazioni? – Abhinav

Se si modifica il valore in modo progammatico, si sa già quando questo si verifica, cosa si può dire che non è possibile chiamare il proprio metodo, (lo stesso forse viene chiamato dal gestore di eventi trigger reale) quando si modifica il valore ?

MODIFICA: in caso contrario, se si ha specificamente bisogno che si verifichi l'incendio effettivo, è possibile anche manualmente inviare l'evento.

fonte

2012-01-09 13:59:37 OnResolve

picture this: si ha 1 funzione di aggiornamento di 5 ingressi, ogni ingresso quando modificato deve chiamare una funzione diversa, tutto è dinamico quindi non si conoscono gli ID e altro .. il modo migliore è aggiungere un listener di modifiche a ciascuno input che chiama la funzione di cui ha bisogno, – bakz

Il codice di Crowder mi ha dato solo un errore TypeError (argomenti insufficienti per UIEvent.initUIEvent). Cambiare a questo:

input.value = "Another example"; 
var event = document.createEvent("UIEvents"); 
event.initUIEvent("change", true, true, window, 1); 
input.dispatchEvent(event);

e funziona.

fonte

2014-01-28 00:20:19 Malte

Si noti che 'initUIEvent' è stato deprecato e rimosso dagli standard Web come dichiarato: https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent –

Nota che initUIEvent è stato deprecato e rimosso dal Web Standards come affermato: developer.mozilla.org/en-US/docs/Web/API/UIEvent/initUIEvent

questo è lo stesso, tranne che doesn' t utilizzare initUIEvent:

input.value = 'Another example'; 
var event = new UIEvent('change', { 
    'view': window, 
    'bubbles': true, 
    'cancelable': true 
}); 
input.dispatchEvent(event);

fonte

2015-07-07 10:50:19

risposta

Problemi correlati