Comment forcer par programme un événement onchange sur une entrée?

Comment forcer par programme un événement onchange sur une entrée?

J'ai essayé quelque chose comme ça:

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

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

Créez un Eventobjet et passez-le à la dispatchEventméthode de l'élément:

var element = document.getElementById('just_an_example');
var event = new Event('change');
element.dispatchEvent(event);

Cela déclenchera des écouteurs d'événements, qu'ils aient été enregistrés en appelant la addEventListenerméthode ou en définissant la onchangepropriété de l'élément.

Si vous voulez que l'événement apparaisse, vous devez passer un deuxième argument au Eventconstructeur:

var event = new Event('change', { bubbles: true });

Informations sur la compatibilité du navigateur:

• dispatchEvent ()
• Un événement()

Dans jQuery, j'utilise principalement:

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

ugh n'utilisez pas eval pour rien . Eh bien, il y a certaines choses, mais elles sont extrêmement rares. Vous feriez plutôt ceci:

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

Regardez ici pour plus d'options: http://jehiah.cz/archive/firing-javascript-events-properly

Pour une raison quelconque, ele.onchange () lance une expception "méthode non trouvée" pour moi dans IE sur ma page, alors j'ai fini par utiliser cette fonction à partir du lien fourni par Kolten et en appelant 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);
    }
}

J'ai cependant créé une page de test qui confirmait que l'appel à onchange () fonctionnait:

<input id="test1" name="test1" value="Hello" onchange="alert(this.value);"/>
<input type="button" onclick="document.getElementById('test1').onchange();" value="Say Hello"/>

Edit: La raison pour laquelle ele.onchange () n'a pas fonctionné était parce que je n'avais rien déclaré pour l'événement onchange. Mais le fireEvent fonctionne toujours.

C'est la réponse la plus correcte pour IE et Chrome:

javascript=>

var element = document.getElementById('xxxx');
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', false, true);
element.dispatchEvent(evt);

Tiré 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 déclenchera essentiellement l'événement DOM réel comme si quelque chose avait réellement changé.

Si vous ajoutez tous vos événements avec cet extrait de code:

//put this somewhere in your JavaScript:
HTMLElement.prototype.addEvent = function(event, callback){
  if(!this.events)this.events = {};
  if(!this.events[event]){
    this.events[event] = [];
    var element = this;
    this['on'+event] = function(e){
      var events = element.events[event];
      for(var i=0;i<events.length;i++){
        events[i](e||event);
      }
    }
  }
  this.events[event].push(callback);
}
//use like this:
element.addEvent('change', function(e){...});

alors vous pouvez simplement utiliser element.on<EVENTNAME>()où <EVENTNAME>est le nom de votre événement, et cela appellera tous les événements avec<EVENTNAME>

Pour déclencher tout événement en Javascript.

 document.getElementById("yourid").addEventListener("change", function({
    //your code here
})

si vous utilisez jQuery, vous auriez:

$('#elementId').change(function() { alert('Do Stuff'); });

ou MS AJAX:

$addHandler($get('elementId'), 'change', function(){ alert('Do Stuff'); });

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

<input type="text" onchange="alert('Do Stuff');" id="myElement" />

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

$addHandler($get('elementId'), 'change', elementChanged);
function elementChanged(){
  alert('Do Stuff!');
}
function editElement(){
  var el = $get('elementId');
  el.value = 'something new';
  elementChanged();
}

Puisque vous écrivez déjà une méthode JavaScript qui fera le changement, il n'y a qu'une ligne supplémentaire à appeler.

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

$get('elementId')._events

Cela vous permettrait d'effectuer des travaux de style réflexion pour trouver le ou les bons gestionnaires d'événements à déclencher.

En utilisant JQuery, vous pouvez effectuer les opérations suivantes:

// for the element which uses ID
$("#id").trigger("change");

// for the element which uses class name
$(".class_name").trigger("change");