Acara perubahan JavaScript adalah jenis acara yang dijalankan saat fokus pada suatu elemen diubah. Acara perubahan JavaScript mewarisi semua metode dan properti Acara
Di sini, di bagian ini, kita akan memahami dan mengimplementasikan penggunaan praktis acara perubahan pada berbagai elemen JavaScript seperti teks input, kotak centang, tombol radio, elemen pilih, dan sebagainya.
Untuk menggunakan change event pada elemen JavaScript, kita perlu menambahkan metode event handler yang dapat kita gunakan addEventListener() atau atribut onChange dari elemen tersebut. Sintaks untuk keduanya diberikan di bawah ini
metode addEventListener()
atribut onChange
Kami akan membahas acara perubahan JavaScript menggunakan kedua cara
Menggunakan acara perubahan JavaScript pada elemen Input
Ada berbagai jenis masukan untuk berbagai elemen seperti kotak teks, tombol radio, atau kotak centang. Saat Anda memberi input dan kemudian berpindah ke elemen lain, seperti menekan tombol atau mouse di atas tombol, peristiwa perubahan mulai beraksi. Namun, saat kita fokus pada input, event change tidak berfungsi. Mari kita lihat dengan bantuan beberapa contoh
Di bawah ini adalah beberapa contoh yang akan membuat kita mengerti penggunaan event change
Contoh 1
Menggunakan perubahan acara pada elemen input sebagai teks
Output dari kode di atas ditunjukkan di bawah ini
Ketika kita mengklik tombol 'Klik saya', fokus hilang dari kotak teks yang berarti bahwa acara perubahan akan mulai beraksi. Juga, kita dapat melihat bahwa ketika kita memberikan input, event change tidak akan bekerja. Setelah mengklik tombol, teks ditampilkan di label
Contoh 2
Menggunakan atribut onChange
Keluaran
Pada kode di atas, saat kita mengetik beberapa teks di kotak teks, fokus acara onChange keluar tetapi segera setelah kita mengklik di suatu tempat di layar, atribut onChange mulai beraksi
Menggunakan ubah acara pada tombol kotak radio
Dalam hal tombol kotak radio, acara perubahan berperan setelah kami memilih salah satu tombol radio. Kita akan melihat pada kode di bawah ini
Output di atas ditunjukkan di bawah ini
Ketika kita mengklik salah satu tombol radio, pesan yang ditentukan ditampilkan yang berarti bahwa dengan mengklik tombol radio, fokusnya hilang
Menggunakan perubahan acara pada elemen pilih
Dalam kasus elemen pilih, acara perubahan berfungsi saat pemilihan nilai tertentu selesai. Di bawah ini kami telah membahas contoh di mana kami dapat memahami cara kerja elemen pilih di atas nilai
Contoh
Keluaran
Pada output di atas, kita dapat melihat bahwa ketika kita memilih nilai dari daftar, nama akan ditampilkan di sampingnya. Itu karena ketika kita memilih nilai, i. e. , saat pemilihan selesai, acara perubahan mulai berperan. Namun, saat kami melakukan pemilihan, acara perubahan tidak berfungsi
Konteks fungsi event handler (tersedia melalui kata kunci this) akan disetel ke instance widget
Penting. Acara tidak diaktifkan saat nilai widget diubah dari kode
Data Peristiwa
e. pengirim kendo.ui.TextBoxInstance widget yang mengaktifkan peristiwa
Contoh - berlangganan acara "ubah" selama inisialisasi
<input id="textbox" /> <script> $("#textbox").kendoTextBox({ change: function(e) { var value = this.value(); /* The result can be observed in the DevTools(F12) console of the browser. */ console.log(value); // Use the value of the widget } }); </script>Contoh - berlangganan acara "ubah" setelah inisialisasi
<input id="textbox" /> <script> function textbox_change(e) { var value = this.value(); /* The result can be observed in the DevTools(F12) console of the browser. */ console.log(value); // Use the value of the widget }; $("#textbox").kendoTextBox(); var textbox = $("#textbox").data("kendoTextBox"); textbox.bind("change", textbox_change); </script> _Acara perubahan diaktifkan hanya setelah nilai widget diubah dan widget itu sendiri diburamkan. Anda dapat menambahkan acara/metode khusus dengan memperluas fungsionalitas TextBox yang ada. Cara menambahkan event keyup_ ke TextBox ditunjukkan dalam artikel ini
Misalnya, saat kami mengetik di bidang teks di bawah – tidak ada acara. Tapi saat kita memindahkan fokus ke tempat lain, misalnya, klik tombol – akan ada change acara
<input type="text" onchange="alert(this.value)"> <input type="button" value="Button">
Untuk elemen lainnya. select, input type=checkbox/radio dipicu tepat setelah pilihan berubah
<select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
Peristiwa input_ dipicu setiap kali setelah nilai diubah oleh pengguna
Tidak seperti peristiwa keyboard, ini memicu perubahan nilai apa pun, bahkan yang tidak melibatkan tindakan keyboard. menempel dengan mouse atau menggunakan pengenalan suara untuk mendikte teks
Contohnya
<input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>_
Jika kita ingin menangani setiap modifikasi <input> maka acara ini adalah pilihan terbaik
Di sisi lain, peristiwa input_ tidak memicu input keyboard dan tindakan lain yang tidak melibatkan perubahan nilai, mis. g. menekan tombol panah ⇦ ⇨ saat di input
Tidak dapat mencegah apa pun di <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_1
Peristiwa input terjadi setelah nilai diubah
Jadi kita tidak bisa menggunakan <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_3 di sana – sudah terlambat, tidak akan ada efeknya
Peristiwa ini terjadi saat memotong/menyalin/menempelkan nilai
Mereka milik kelas dan memberikan akses ke data yang dipotong/disalin/ditempelkan
Kami juga dapat menggunakan <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>3 untuk membatalkan tindakan, lalu tidak ada yang disalin/ditempel
Misalnya, kode di bawah ini mencegah semua peristiwa <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>5 dan menampilkan teks yang ingin kita potong/salin/tempel
<input type="text" id="input"> <script> input.onpaste = function(event) { alert("paste: " + event.clipboardData.getData('text/plain')); event.preventDefault(); }; input.oncut = input.oncopy = function(event) { alert(event.type + '-' + document.getSelection()); event.preventDefault(); }; </script>_
Tolong dicatat. di dalam <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_6 dan <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>7 event handler panggilan ke <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>8 mengembalikan string kosong. Itu karena secara teknis datanya belum ada di clipboard. Jika kami menggunakan <select onchange="alert(this.value)"> <option value="">Select something</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>_3 itu tidak akan disalin sama sekali
Jadi contoh di atas menggunakan <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>_0 untuk mendapatkan teks yang dipilih. Anda dapat menemukan detail selengkapnya tentang pemilihan dokumen di artikel Pemilihan dan Jangkauan
Anda dapat menyalin/menempel bukan hanya teks, tetapi semuanya. Misalnya, kita dapat menyalin file di pengelola file OS, dan menempelkannya
Itu karena <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>1 mengimplementasikan antarmuka <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>2, biasanya digunakan untuk drag'n'drop dan copy/paste. Ini sedikit di luar jangkauan kami sekarang, tetapi Anda dapat menemukan metodenya di
Selain itu, ada API asinkron tambahan untuk mengakses clipboard. <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>_3. Lebih lanjut tentang itu di spesifikasi Clipboard API and events, tidak didukung oleh Firefox
Clipboard adalah hal tingkat OS "global". Seorang pengguna dapat beralih di antara berbagai aplikasi, menyalin/menempel berbagai hal, dan halaman browser seharusnya tidak melihat semua itu
Jadi sebagian besar browser mengizinkan akses baca/tulis tanpa batas ke clipboard hanya dalam lingkup tindakan pengguna tertentu, seperti menyalin/menempel, dll.
Dilarang membuat acara clipboard "khusus" dengan <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>4 di semua browser kecuali Firefox. Dan bahkan jika kami berhasil mengirimkan peristiwa semacam itu, spesifikasi dengan jelas menyatakan bahwa peristiwa "sintetik" semacam itu tidak boleh menyediakan akses ke papan klip
Bahkan jika seseorang memutuskan untuk menyimpan <input type="text" id="input"> oninput: <span id="result"></span> <script> input.oninput = function() { result.innerHTML = input.value; }; </script>_5 di event handler, dan kemudian mengaksesnya nanti – itu tidak akan berhasil
Untuk mengulangi, hanya berfungsi dalam konteks penangan peristiwa yang diprakarsai pengguna
Di sisi lain, adalah API yang lebih baru, dimaksudkan untuk digunakan dalam konteks apa pun. Itu meminta izin pengguna, jika diperlukan