Bagaimana cara saya secara terprogram memaksakan acara onchange pada input?

Bagaimana cara saya secara terprogram memaksakan acara onchange pada input?

Saya sudah mencoba sesuatu seperti ini:

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

Tetapi tujuan akhir saya adalah mengaktifkan fungsi pendengar apa pun, dan itu sepertinya tidak berhasil. Juga tidak hanya memperbarui atribut 'nilai'.

Buat sebuah Eventobjek dan teruskan ke dispatchEventmetode elemen:

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

Ini akan memicu event listener terlepas dari apakah mereka didaftarkan dengan memanggil addEventListenermetode atau dengan menyetel onchangeproperti elemen.

Jika Anda ingin acara menggelembung, Anda perlu meneruskan argumen kedua ke Eventkonstruktor:

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

Informasi tentang kompatibilitas browser:

• dispatchEvent ()
• Peristiwa()

Di jQuery saya kebanyakan menggunakan:

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

ugh jangan gunakan eval untuk apa pun . Memang ada hal-hal tertentu, tetapi itu sangat jarang. Sebaliknya, Anda akan melakukan ini:

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

Lihat di sini untuk opsi lainnya: http://jehiah.cz/archive/firing-javascript-events-properly

Untuk beberapa alasan ele.onchange () adalah melemparkan "metode tidak ditemukan" expception untuk saya di IE pada halaman saya, jadi saya akhirnya menggunakan fungsi ini dari link Kolten disediakan dan memanggil fireEvent (ele, 'perubahan'), yang bekerja :

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

Namun saya melakukannya, membuat halaman pengujian yang mengonfirmasi bahwa panggilan harus onchange () berfungsi:

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

Sunting: Alasan ele.onchange () tidak berfungsi adalah karena saya belum benar-benar menyatakan apa pun untuk acara onchange. Tapi fireEvent masih berfungsi.

Ini adalah jawaban paling benar untuk IE dan Chrome ::

javascript=>

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

Diambil dari bagian bawah 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);
    }
}

Anda dapat, tentu saja, mengganti barang $ .browser ke metode deteksi browser Anda sendiri untuk membuatnya independen jQuery.

Untuk menggunakan fungsi ini:

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

Ini pada dasarnya akan mengaktifkan peristiwa DOM asli seolah-olah ada sesuatu yang benar-benar berubah.

Jika Anda menambahkan semua acara Anda dengan cuplikan kode ini:

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

maka Anda dapat menggunakan di element.on<EVENTNAME>()mana <EVENTNAME>nama acara Anda, dan itu akan memanggil semua acara dengan<EVENTNAME>

Untuk memicu acara apa pun di Javascript.

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

jika Anda menggunakan jQuery, Anda akan memiliki:

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

atau MS AJAX:

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

Atau dalam HTML mentah elemen:

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

Setelah membaca ulang pertanyaan itu, saya pikir saya salah membaca apa yang harus dilakukan. Saya tidak pernah menemukan cara untuk memperbarui elemen DOM dengan cara yang akan memaksa peristiwa perubahan, hal terbaik yang Anda lakukan adalah memiliki metode penanganan peristiwa terpisah, seperti ini:

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

Karena Anda sudah menulis metode JavaScript yang akan melakukan perubahan, hanya ada 1 baris tambahan untuk dipanggil.

Atau, jika Anda sedang menggunakan kerangka Microsoft AJAX Anda dapat mengakses semua event handler melalui:

$get('elementId')._events

Ini akan memungkinkan Anda melakukan beberapa cara kerja gaya refleksi untuk menemukan penangan kejadian yang tepat untuk diaktifkan.

Menggunakan JQuery, Anda dapat melakukan hal berikut:

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

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