Comment puis-je forcer programmation un événement onchange sur un input ?

Question

Comment puis-je forcer de manière programmatique un événement onchange sur une entrée ?

J'ai essayé quelque chose comme ceci :

var code = ele.getAttribute('onchange');
eval(code);

Mais mon objectif final est de déclencher toutes les fonctions écouteurs, et cela ne semble pas fonctionner. La mise à jour de l'attribut 'valeur' ne fonctionne pas non plus.

Answer 1

En jQuery, j'utilise principalement :

$("#element").trigger("change");

Answer 2

Ugh ne pas utiliser eval pour quoi que ce soit. Eh bien, il y a certaines choses, mais elles sont extrêmement rares. Au lieu de cela, vous feriez ceci :

document.getElementById("test").onchange()

Jetez un œil ici pour plus d'options : http://jehiah.cz/archive/firing-javascript-events-properly

Answer 3

Pour une raison quelconque, ele.onchange() me lance une exception "méthode non trouvée" dans IE sur ma page, alors j'ai fini par utiliser cette fonction du lien Kolten fournie et appeler fireEvent(ele, 'change'), qui a fonctionné :

function fireEvent(element,event){
    if (document.createEventObject){
        // dispatch for IE
        var evt = document.createEventObject();
        return element.fireEvent('on'+event,evt)
    }
    else{
        // dispatch for firefox + others
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event, true, true ); // event type,bubbling,cancelable
        return !element.dispatchEvent(evt);
    }
}

Cependant, j'ai créé une page de test qui a confirmé que l'appel devrait fonctionner avec onchange() :

Édition : La raison pour laquelle ele.onchange() ne fonctionnait pas était parce que je n'avais en fait rien déclaré pour l'événement onchange. Mais fireEvent fonctionne toujours.

Answer 4

Extrait du bas de QUnit

function triggerEvent( elem, type, event ) {
    if ( $.browser.mozilla || $.browser.opera ) {
        event = document.createEvent("MouseEvents");
        event.initMouseEvent(type, true, true, elem.ownerDocument.defaultView,
            0, 0, 0, 0, 0, false, false, false, false, 0, null);
        elem.dispatchEvent( event );
    } else if ( $.browser.msie ) {
        elem.fireEvent("on"+type);
    }
}

Vous pouvez bien sûr remplacer les éléments $.browser par vos propres méthodes de détection de navigateur pour le rendre indépendant de jQuery.

Pour utiliser cette fonction :

var event;
triggerEvent(ele, "change", event);

Cela va essentiellement déclencher l'événement DOM réel comme si quelque chose avait vraiment changé.

Answer 5

Si vous utilisez jQuery, vous auriez :

$('#elementId').change(function() { alert('Faire quelque chose'); });

ou MS AJAX :

$addHandler($get('elementId'), 'change', function(){ alert('Faire quelque chose'); });

Ou dans le HTML brut de l'élément :

Après avoir relu la question, je pense avoir mal compris ce qui devait être fait. Je n'ai jamais trouvé de moyen de mettre à jour un élément du DOM de manière à déclencher un événement de changement, ce que vous devriez faire de mieux est d'avoir une méthode de gestionnaire d'événements distincte, comme ceci :

$addHandler($get('elementId'), 'change', elementChanged);
function elementChanged(){
  alert('Faire quelque chose !');
}
function editElement(){
  var el = $get('elementId');
  el.value = 'quelque chose de nouveau';
  elementChanged();
}

Puisque vous écrivez déjà une méthode JavaScript qui effectuera le changement, il suffit d'une ligne supplémentaire pour l'appeler.

Ou, si vous utilisez le framework Microsoft AJAX, vous pouvez accéder à tous les gestionnaires d'événements via :

$get('elementId')._events

Cela vous permettrait de faire des travaux de style réflexif pour trouver le(s) bon(s) gestionnaire(s) d'événements à déclencher.