js ganti acara. Penangan atau sumber peristiwa perubahan. Ditambahkan dalam versi jQuery

Peristiwa "perubahan" JavaScript dimunculkan atau dipantau.

  • versi ditambahkan: 1.0.perubahan(penangan(eventObject))

    pengendali(objek kejadian)

    Jenis: Fungsi()

    Fungsi pengendali acara.

  • versi ditambahkan: 1.4.3.change(, handler(eventObject))

    Data peristiwa

    Jenis: Objek

    Sebuah objek dengan data yang akan diteruskan ke handler.

    pengendali(objek kejadian)

    Jenis: Fungsi()

    Fungsi pengendali acara

  • versi ditambahkan: 1.0.mengubah()

Metode ini adalah kependekan dari .on("change", handler), dan .trigger("change").

Peristiwa perubahan dipicu ketika bidang formulir berubah. Ini melacak ladang, dan. Untuk kotak pilihan, tombol radio, dan kotak centang, peristiwa akan diaktifkan segera setelah perubahan, dalam kasus lain hanya pada saat pengguna berpindah ke elemen lain.

Misalnya, kami memiliki HTML berikut:

Opsi 1 Opsi 2 Memicu pengendali

Pengendali acara dapat dilampirkan seperti ini:

$(".target").change(function() ( alert("Handler untuk .change() dipanggil."); ));

Sekarang, ketika kita mengubah nilai elemen pilih, kita akan melihat pesan. Ini juga akan muncul jika bidang lain diubah, tetapi setelah beralih ke bidang lain. Jika elemen kehilangan fokus tanpa dilakukan perubahan apa pun, peristiwa tersebut tidak terjadi. Untuk memicu kejadian ini sendiri, cukup panggil metode .change() tanpa argumen:

$("#lainnya").klik(fungsi() ( $(".target").perubahan(); ));

Setelah mengeksekusi kode ini, kita akan melihat pesan dari daftar sebelumnya. Kali ini kita akan bertemu dengannya dua kali, karena... Kami memiliki dua elemen dalam formulir kami.

Contoh:

Contoh: melacak perubahan di kotak pilih.

ubah div demo ( warna: merah; ) Permen Cokelat Taffy Caramel Fudge Cookie $("select") .change(function () ( var str = ""; $("select option:selected").each(function() ( str += $(ini).teks() + " "; )); $("div").teks(str)).perubahan();

Penangan OnChange dipanggil ketika kolom input apa pun diubah atau tombol apa pun diklik.

Argumen Nama berisi nama huruf kecil dari kolom input atau tombol.

Contoh: Prosedur OnChange(Nama: String); Mulai // Jika kolom harga atau kuantitas diubah, hitung jumlahnya Jika Nama=”harga” Atau Nama=”cnt” Maka Jumlah:= RoundMul(Harga, Cnt, 2); // Jika field jumlah diubah, maka kita menghitung harganya. Jika Nama="summa" Maka Harga:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Akhir;

Efek serupa dapat dicapai dengan menggunakan penangan OnPriceChange, OnCntChange, dan OnSummaChange.

Contoh: Prosedur OnPriceChange; Mulai Summa:= RoundMul(Harga, Cnt, 2); Akhir; Prosedur OnCntChange; Mulai Summa:= RoundMul(Harga, Cnt, 2); Akhir; Prosedur PadaSummaChange; Harga Mulai:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); Akhir;

Penangan ini nyaman digunakan saat mengatur modularitas, karena ia mengumpulkan informasi tentang hampir semua peristiwa. Misalnya:

Var Kelas Dasar: Varian; Prosedur DiCreate; Mulai BaseDocument.Init(Self); // Membuat kelas dasar dan bertukar referensi dengannya. Inisialisasi dokumen. Akhir; Prosedur OnChange(Nama: String); Mulai BaseClass.OnChange(Nama); // Meneruskan event ke kelas dasar Akhir;

Atau contoh modularitas menggunakan singleton (properti modul pada tab Deskripsi editor):

Prosedur DiCreate; Mulai BaseClass.OnCreate(Self); // Inisialisasi dokumen. Akhir; Prosedur OnChange(Nama: String); Mulai BaseClass.OnChange(Diri, Nama); // Meneruskan event ke kelas dasar. Akhir;

metode jQuery .change() mengikat JavaScript pengendali acara "mengubah"(perubahan elemen), atau memicu peristiwa ini pada elemen yang dipilih. Metode ini digunakan dengan elemen formulir HTML.

Peristiwa "memilih" Diaktifkan ketika nilai elemen formulir berubah (elements , dan elements ). Harap perhatikan bahwa untuk elemen seperti tombol radio, kotak centang, dan elemen daftar drop-down, acara "memilih" dipanggil segera setelah pengguna membuat pilihan, dan untuk elemen dengan konten teks ditunda hingga kontrol kehilangan fokus (misalnya, elemen dengan tipe teks type = "text" , atau ).

Jika nilai suatu elemen diubah menggunakan JavaScript, misalnya menggunakan metode .val() jQuery, lalu event "mengubah" tidak dipanggil.

Sintaks jQuery: Sintaks 1.0: $(selector).change() // metode yang digunakan tanpa parameter $(selector).change( penangan) penangan- Fungsi (Acara objek acara) Sintaks 1.4.3: $(selector).change( Data peristiwa, penangan) Data peristiwa-Apa pun penangan- Fungsi (Acara objek acara)

Harap perhatikan bahwa metode .change() digunakan bersama dengan fungsi yang diteruskan sebagai parameter ( penangan) adalah singkatan dari metode .on(), dan tanpa parameter adalah singkatan dari metode .trigger():

$(pemilih).pada(" mengubah", penangan) $(pemilih).pemicu(" mengubah")

Ditambahkan di jQuery 1.0 (sintaks diperbarui di versi 1.4.3) Nilai parameter Contoh penggunaan Menggunakan metode jQuery .change() (tanpa parameter dan dengan fungsi) $(document).ready(function ()( $("button" ). click(function ()( // mengatur fungsi ketika elemen diklik $("textarea ").change(); // memanggil event perubahan pada elemen ) $(this).change(function () )( // mengatur fungsi ketika peristiwa perubahan dipicu pada elemen yang berinteraksi dengan pengguna $("p ").css("display ", "block ") // mengatur elemen tersebut

Menjadi blok .text("Sesuatu telah berubah") // tambahkan konten teks .fadeOut(750 ); // ubah transparansi elemen dengan lancar ) );

1 2 3

1 2



) );

Klik 1 2 "mengubah" Ubah saya

Dalam contoh ini, menggunakan metode .change() jQuery, ketika sebuah elemen (tombol) diklik, kita mengaktifkan sebuah event

pada elemen. Elemen lain apa pun dalam contoh ini dapat digunakan sebagai pengganti elemen ini.

Saya memiliki elemen input dan saya ingin terus memeriksa panjang konten dan setiap kali panjangnya menjadi sama dengan ukuran tertentu, saya ingin mengaktifkan tombol kirim tetapi saya menghadapi masalah dengan acara javascript onchange karena acara hanya diaktifkan ketika elemen input keluar dari cakupan, bukan saat konten berubah.

Onchange tidak aktif ketika isi nama berubah, namun hanya aktif ketika nama tidak fokus.

Adakah yang bisa dilakukan agar acara ini berhasil mengubah kontennya? atau acara lain yang bisa saya gunakan untuk ini? Saya menemukan solusi menggunakan fungsi onkeyup, tetapi tidak berfungsi saat kami memilih beberapa konten dari penambahan otomatis browser.

Saya ingin sesuatu yang dapat berfungsi ketika konten suatu bidang berubah, keyboard atau mouse... ada ide?

Agen pengguna harus mengirimkan acara ini ketika satu atau lebih karakter. Karakter ini dapat berasal dari berbagai sumber, misalnya karakter yang dihasilkan dari penekanan atau pelepasan tombol pada perangkat keyboard, dari pemrosesan editor metode input, atau dari perintah suara. Jika operasi "tempel" menghasilkan urutan karakter sederhana, yaitu teks pass tanpa informasi struktur atau gaya apa pun, jenis peristiwa ini juga harus dibuat.

Kutipan Blok>

Diaktifkan dalam kontrol ketika pengguna mengubah nilai

Kutipan Blok>

Anda perlu menggunakan kombinasi onkeyup dan onclick (atau onmouseup) jika ingin menangkap peluang apa pun.

Inilah solusi lain yang saya kembangkan untuk masalah yang sama. Namun, saya menggunakan banyak kolom input, jadi saya menyimpan nilai lama sebagai atribut yang ditentukan pengguna dari elemen itu sendiri: "nilai data". Menggunakan jQuery sangat mudah untuk dikelola.

$(document).delegate(".filterBox", "keyup", ( self: this ), fungsi (e) ( var self = e.data.self; if (e.keyCode == 13) ( e.preventDefault( ); $(ini).attr("nilai data", $(ini).val()); self.filterBy(ini, benar) ) lain jika (e.keyCode == 27) ( $(ini). val(""); $(ini).attr("nilai data", ""); self.filterBy(ini, benar) ) lain ( jika ($(ini).attr("nilai data") ! = $(ini).val()) ( $(ini).attr("nilai data", $(ini).val()); self.filterBy(ini); ) ) ));

di sini, saya telah menggunakan 5-6 kolom input, memiliki kelas filterBox, saya melakukan metode filterBy hanya jika nilai data berbeda dari nilainya sendiri.

  • Sergei Savenkov

    semacam ulasan "pendek"... seolah-olah mereka sedang terburu-buru di suatu tempat