Bir girişe programlı olarak onchange olayını nasıl zorlarım?

Bir girişe programlı olarak onchange olayını nasıl zorlarım?

Bunun gibi bir şey denedim:

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

Ama benim nihai amacım herhangi bir dinleyici işlevini ateşlemek ve bu işe yaramıyor gibi görünüyor. Sadece "değer" özniteliğini güncellemek de değildir.

Bir Eventnesne oluşturun ve onu dispatchEventöğenin yöntemine aktarın:

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

Bu, addEventListeneryöntemi çağırarak veya onchangeöğenin özelliğini ayarlayarak kayıtlı olup olmadıklarına bakılmaksızın olay dinleyicilerini tetikleyecektir .

Olayın balonlaşmasını istiyorsanız, kurucuya ikinci bir argüman iletmeniz gerekir Event:

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

Tarayıcı uyumluluğuyla ilgili bilgiler:

• dispatchEvent ()
• Etkinlik()

JQuery'de çoğunlukla kullanıyorum:

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

öf için eval kullanmayın şey . Şey, belli şeyler var ama bunlar çok nadir. Aksine, şunu yaparsınız:

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

Daha fazla seçenek için buraya bakın: http://jehiah.cz/archive/firing-javascript-events-properly

Bazı nedenlerden dolayı ele.onchange (), sayfamdaki IE'de benim için bir "yöntem bulunamadı" ifadesi atıyor, bu nedenle Kolten'in sağladığı bağlantıdan bu işlevi kullandım ve işe yarayan fireEvent'i (ele, 'değiştir') çağırdım. :

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

Ancak, onchange () işlevinin çalışması gerektiğini doğrulayan bir test sayfası oluşturdum:

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

Düzenleme: ele.onchange () işlevinin çalışmamasının nedeni, aslında onchange olayı için hiçbir şey bildirmemiş olmamdı. Ancak fireEvent hala çalışıyor.

Bu, IE ve Chrome için en doğru cevaptır ::

javascript=>

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

QUnit'in altından alınmıştır

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

Elbette, $ .browser öğelerini jQuery'den bağımsız hale getirmek için kendi tarayıcı algılama yöntemlerinizle değiştirebilirsiniz.

Bu işlevi kullanmak için:

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

Bu, temelde gerçek DOM olayını sanki bir şey değişmiş gibi tetikler.

Tüm etkinliklerinizi bu kod pasajıyla eklerseniz:

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

o zaman etkinliğinizin adının element.on<EVENTNAME>()nerede <EVENTNAME>olduğunu kullanabilirsiniz ve bu, tüm etkinlikleri<EVENTNAME>

Javascript'teki herhangi bir olayı tetiklemek için.

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

jQuery kullanıyorsanız şunlara sahip olursunuz:

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

veya MS AJAX:

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

Veya öğenin ham HTML'sinde:

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

Soruyu yeniden okuduktan sonra, yapılması gerekenleri özlediğimi düşünüyorum. Bir DOM öğesini bir değişiklik olayını zorlayacak şekilde güncellemenin bir yolunu hiç bulamadım, yaptığınız en iyi şey ayrı bir olay işleyici yöntemine sahip olmaktır, örneğin:

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

Zaten değiştirmeyi yapacak bir JavaScript yöntemi yazdığınız için, çağrılacak yalnızca 1 ek satır var.

Eğer Veya edilir Microsoft AJAX framework kullanarak tüm etkinlik işleyicileri yoluyla erişebilir:

$get('elementId')._events

Ateşlenecek doğru olay işleyicisini / işleyicilerini bulmak için bazı yansıma tarzı çalışmalar yapmanıza izin verir.

JQuery kullanarak aşağıdakileri yapabilirsiniz:

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

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