web-dev-qa-db-fra.com

Comment puis-je déclencher un événement onchange manuellement?

Je suis en train de définir une valeur de champ de texte date-heure via un widget de calendrier. De toute évidence, le widget calendrier fait quelque chose comme ceci:

document.getElementById('datetimetext').value = date_value;

Ce que je veux, c'est: lors de la modification de la valeur dans le champ de texte date-heure, j'ai besoin de réinitialiser d'autres champs de la page. J'ai ajouté un écouteur d'événement onchange au champ datetimetext qui ne se déclenche pas, car je suppose que onchange ne se déclenche que lorsque l'élément est activé et que sa valeur est modifiée en cas de perte de ce dernier.

Par conséquent, je cherche un moyen de déclencher manuellement cet événement onchange (qui, je suppose, devrait vérifier la différence de valeur dans le champ de texte).

Des idées ?

javascriptjavascript-eventsevent-handling
352
CodeTweetie

Vous pouvez le faire de plusieurs manières. Si le programme d'écoute onchange est une fonction définie via la propriété element.onchange et que vous ne vous préoccupez pas de l'objet événement ou de la propagation/propagation, la méthode la plus simple consiste simplement à appeler cette fonction:

element.onchange();

Si vous en avez besoin pour simuler l'événement réel dans son intégralité ou si vous définissez l'événement via l'attribut html ou addEventListener/attachEvent, vous devez effectuer un peu de détection de fonctionnalités pour déclencher correctement l'événement:

if ("createEvent" in document) {
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("change", false, true);
    element.dispatchEvent(evt);
}
else
    element.fireEvent("onchange");
427
Andy E

MDN suggère qu'il existe un moyen beaucoup plus simple de le faire dans les navigateurs modernes:

// Assuming we're listening for e.g. a 'change' event on `element`

// Create a new 'change' event
var event = new Event('change');

// Dispatch it.
element.dispatchEvent(event);
288
Milan Iliev

Pour ceux qui utilisent jQuery, il existe une méthode pratique: http://api.jquery.com/change/

14
Jacob Mouka