Penggunaan oninput, onpropertychange, onchange
Peristiwa pemicu onchange harus memenuhi dua kondisi:
a) Properti objek saat ini berubah dan dipicu oleh peristiwa keyboard atau mouse (pemicu skrip tidak valid)
b) Objek saat ini kehilangan fokus (onblur);
Dalam kasus onpropertychange, selama properti objek saat ini berubah, peristiwa tersebut akan dipicu, tetapi ini eksklusif untuk IE;
oninput adalah onpropertychange versi browser non-IE. Ini mendukung browser seperti Firefox dan Opera, tetapi ada satu perbedaan. Ketika terikat pada suatu objek, tidak semua perubahan properti pada objek dapat memicu peristiwa perubahan nilai objek. Itu berhasil.
Hentikan peristiwa yang meluap-luap
if (e) //Hentikan peristiwa yang menggelegak e.stopPropagation();
lain window.event.cancelBubble = true;
Jalankan kode di atas dan klik pada kotak input untuk menemukan bahwa onpropertychange juga akan terpicu. Memasukkan nilai juga akan memicu kejadian ini. Ini membuktikan bahwa selama nilai properti diubah, kejadian ini akan terpicu.
Kedua, sekarang kita telah menemukan fitur ini, akan ada masalah: terkadang ketika kita ingin melakukan operasi fungsi ketika nilai kotak input berubah, kita juga perlu memodifikasi atribut khusus, sehingga onpropertychange akan Dipicu dua kali, ini mungkin tidak menjadi seperti yang kita inginkan.
Coba tebak, karena atribut tersebut disediakan, Anda seharusnya bisa mengetahui atribut mana yang diubah. Cobalah untuk mendapatkan jumlah parameter dan isinya.
Kode XML/HTML
Copy kode kodenya sebagai berikut:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<skrip tipe="teks/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alert(argumen.panjang);
for(var i=0;i<argumen.panjang;i++){
peringatan(argumen[i]);
}
});
-->
</skrip>
Dengan menjalankan kode di atas, Anda akan menemukan pop-up 1 dan [objek], yang menunjukkan bahwa peristiwa hanya meneruskan satu parameter ke fungsi panggilan balik dan bertipe objek.
Kalau begitu mari kita coba melintasi objek ini.
Kode XML/HTML
Copy kode kodenya sebagai berikut:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<skrip tipe="teks/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
untuk(var item di o){
peringatan(barang+":"+o[barang]);
}
});
//-->
</skrip>
Setelah dijalankan, kami menemukan bahwa ada banyak atribut, tetapi jika kami perhatikan dengan cermat, kami mungkin menemukan atribut seperti itu: nama properti. Ya, ini digunakan untuk mengetahui atribut mana yang telah dimodifikasi.
Kode XML/HTML
Copy kode kodenya sebagai berikut:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<skrip tipe="teks/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
alert(o.propertyName);
});
//-->
</skrip>
Klik kotak teks dan masukkan nilai masing-masing, dan Anda akan menemukan myprop dan value muncul masing-masing.
Kembali ke pertanyaan awal, kita hanya perlu menentukan apakah nilainya telah diubah.
Mari kita lihat langsung kodenya:
Kode XML/HTML
Copy kode kodenya sebagai berikut:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<skrip tipe="teks/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //Jangan lakukan operasi berikut kecuali nilainya berubah
//.....Fungsi pemrosesan
});
//-->
</skrip>