Jak programowo wymusić zdarzenie onchange na wejściu?

Jak programowo wymusić zdarzenie onchange na wejściu?

Próbowałem czegoś takiego:

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

Ale moim ostatecznym celem jest uruchomienie funkcji słuchacza, a to nie działa. Nie wystarczy też zaktualizować atrybut „wartość”.

Utwórz Eventobiekt i przekaż go do dispatchEventmetody elementu:

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

Spowoduje to wyzwolenie detektorów zdarzeń niezależnie od tego, czy zostały zarejestrowane przez wywołanie addEventListenermetody, czy ustawienie onchangewłaściwości elementu.

Jeśli chcesz, aby zdarzenie było bąbelkowe, musisz przekazać konstruktorowi drugi argument Event:

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

Informacje o kompatybilności przeglądarki:

• dispatchEvent ()
• Zdarzenie()

W jQuery najczęściej używam:

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

ugh nie używaj eval do niczego . Cóż, są pewne rzeczy, ale są one niezwykle rzadkie. Raczej zrobiłbyś to:

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

Poszukaj więcej opcji: http://jehiah.cz/archive/firing-javascript-events-properly

Z jakiegoś powodu ele.onchange () rzuca dla mnie w IE na mojej stronie wyjątek "nie znaleziono metody", więc skończyło się na tym, że użyłem tej funkcji z linku podanego przez Kolten i wywołałem fireEvent (ele, 'zmiana'), co zadziałało :

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

Stworzyłem jednak stronę testową, która potwierdziła, że ​​połączenie powinno działać:

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

Edycja: Powodem, dla którego ele.onchange () nie działało, było to, że tak naprawdę nie zadeklarowałem niczego dla zdarzenia onchange. Ale fireEvent nadal działa.

To jest najbardziej poprawna odpowiedź dla IE i Chrome:

javascript=>

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

Zaczerpnięte z dołu 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);
    }
}

Możesz oczywiście zamienić zawartość $ .browser na własne metody wykrywania przeglądarki, aby uczynić ją niezależną od jQuery.

Aby skorzystać z tej funkcji:

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

Zasadniczo spowoduje to uruchomienie prawdziwego zdarzenia DOM, tak jakby coś się faktycznie zmieniło.

Jeśli dodasz wszystkie swoje wydarzenia z tym fragmentem kodu:

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

wtedy możesz po prostu użyć element.on<EVENTNAME>()gdzie <EVENTNAME>jest nazwą twojego wydarzenia, a to wywoła wszystkie wydarzenia z<EVENTNAME>

Do wyzwalania dowolnego zdarzenia w JavaScript.

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

jeśli używasz jQuery, powinieneś:

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

lub MS AJAX:

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

Lub w surowym kodzie HTML elementu:

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

Po ponownym przeczytaniu pytania myślę, że przegapiłem - przeczytałem, co było do zrobienia. Nigdy nie znalazłem sposobu, aby zaktualizować element DOM w sposób, który wymusi zdarzenie zmiany, najlepiej jest mieć oddzielną metodę obsługi zdarzeń, taką jak ta:

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

Ponieważ już piszesz metodę JavaScript, która dokona zmiany, wywołanie jest tylko 1 dodatkową linią.

Lub, jeśli są za pomocą programu Microsoft AJAX można uzyskać dostęp do wszystkich programów obsługi zdarzeń poprzez:

$get('elementId')._events

Pozwoliłoby ci to na wykonanie pewnych działań w stylu refleksji, aby znaleźć odpowiednią obsługę zdarzeń do uruchomienia.

Za pomocą JQuery możesz wykonać następujące czynności:

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

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