Je définis la valeur d'un champ de texte date-heure via un widget de calendrier. Évidemment, le widget calendrier fait quelque chose comme ceci :
document.getElementById('datetimetext').value = date_value;
Ce que je veux, c'est :
Lorsque la valeur du champ date-heure change, je dois réinitialiser d'autres champs de la page. J’ai ajouté un écouteur d’événement onchange au champ datetimetext qui n’est pas déclenché, car je suppose que onchange
n’est déclenché que lorsque l’élément reçoit le focus & ; sa valeur est modifiée lorsque le focus est perdu.
Je cherche donc un moyen de déclencher manuellement cet événement onchange
(qui, je suppose, devrait se charger de vérifier la différence de valeur dans le champ de texte).
Une idée ?
Il y a plusieurs façons de procéder. Si l'écouteur onchange
est une fonction définie via la propriété element.onchange
et que vous ne vous souciez pas de l'objet événement ou de la propagation, la méthode la plus simple est d'appeler cette fonction :
element.onchange();
Si vous avez besoin de simuler entièrement l'événement réel, ou si vous définissez l'événement via l'attribut html ou addEventListener
/attachEvent
, vous devez faire un peu de détection de caractéristiques 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");
[MDN] (https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events) suggère qu'il existe un moyen beaucoup plus propre de procéder 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);