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

Question

Je définis une valeur de champ de texte date-heure via un widget de calendrier. Évidemment, le widget de calendrier fait quelque chose comme ceci :

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

Ce que je veux, c'est :
En changeant la valeur dans le champ de texte date-heure, je dois réinitialiser certains autres champs sur la page. J'ai ajouté un écouteur d'événements onchange au champ datetimetext qui n'est pas déclenché, car je suppose que onchange est déclenché uniquement lorsque l'élément obtient le focus et que sa valeur est modifiée en perdant le focus.

Je cherche donc un moyen de déclencher manuellement cet événement onchange (ce qui, je suppose, devrait se charger de vérifier la différence de valeur dans le champ de texte).

Des idées ?

Answer 1

Il existe plusieurs façons de le faire. Si l'auditeur onchange est une fonction définie via la propriété element.onchange et que vous ne vous souciez pas de l'objet d'événement ou de la propagation, la méthode la plus simple est d'appeler simplement cette fonction:

element.onchange();

Si vous avez besoin de simuler l'événement réel en entier, ou si vous avez défini l'événement via l'attribut HTML ou addEventListener/attachEvent, vous devez effectuer une détection des 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");

Answer 2

MDN suggère qu'il y a une manière beaucoup plus propre de faire cela dans les navigateurs modernes :

// En supposant que nous écoutons par exemple un événement 'change' sur `élément`

// Créez un nouvel événement 'change'
var event = new Event('change');

// Dispatch it.
element.dispatchEvent(event);

Answer 3

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