Come si forza a livello di codice un evento onchange su un input?

Come si forza a livello di codice un evento onchange su un input?

Ho provato qualcosa di simile:

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

Ma il mio obiettivo finale è attivare qualsiasi funzione di ascolto e questo non sembra funzionare. Né si limita ad aggiornare l'attributo "valore".

Crea un Eventoggetto e passalo al dispatchEventmetodo dell'elemento:

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

Ciò attiverà i listener di eventi indipendentemente dal fatto che siano stati registrati chiamando il addEventListenermetodo o impostando la onchangeproprietà dell'elemento.

Se vuoi che l'evento diventi bolla, devi passare un secondo argomento al Eventcostruttore:

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

Informazioni sulla compatibilità del browser:

• dispatchEvent ()
• Evento()

In jQuery utilizzo principalmente:

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

ugh non usare eval per niente . Bene, ci sono alcune cose, ma sono estremamente rare. Piuttosto, faresti questo:

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

Cerca qui altre opzioni: http://jehiah.cz/archive/firing-javascript-events-properly

Per qualche motivo ele.onchange () sta lanciando un'eccezione "metodo non trovato" per me in IE sulla mia pagina, quindi ho finito per usare questa funzione dal collegamento fornito da Kolten e chiamare fireEvent (ele, 'change'), che ha funzionato :

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);
    }
}

Tuttavia, ho creato una pagina di prova che ha confermato che la chiamata dovrebbe funzionare su onchange ():

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

Modifica: il motivo per cui ele.onchange () non ha funzionato era perché in realtà non avevo dichiarato nulla per l'evento onchange. Ma fireEvent funziona ancora.

Questa è la risposta più corretta per IE e Chrome:

javascript=>

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

Preso dal fondo di 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);
    }
}

Ovviamente puoi sostituire $ .browser con i metodi di rilevamento del tuo browser per renderlo indipendente da jQuery.

Per utilizzare questa funzione:

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

Questo fondamentalmente attiverà il vero evento DOM come se qualcosa fosse effettivamente cambiato.

Se aggiungi tutti i tuoi eventi con questo snippet di codice:

//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){...});

quindi puoi semplicemente usare element.on<EVENTNAME>()dov'è <EVENTNAME>il nome del tuo evento e questo chiamerà tutti gli eventi con<EVENTNAME>

Per attivare qualsiasi evento in Javascript.

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

se stai usando jQuery avresti:

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

o MS AJAX:

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

O nell'HTML grezzo dell'elemento:

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

Dopo aver riletto la domanda credo di aver letto male quello che doveva essere fatto. Non ho mai trovato un modo per aggiornare un elemento DOM in un modo che forzerà un evento di modifica, quello che stai facendo meglio è avere un metodo di gestione eventi separato, come questo:

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

Poiché stai già scrivendo un metodo JavaScript che effettuerà la modifica, è solo 1 riga aggiuntiva da chiamare.

Oppure, se si sta utilizzando il framework Microsoft AJAX è possibile accedere a tutti i gestori di eventi tramite:

$get('elementId')._events

Ti consentirebbe di eseguire alcune operazioni in stile riflessione per trovare i gestori di eventi giusti da attivare.

Utilizzando JQuery puoi fare quanto segue:

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

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