Apakah Perbezaan Antara Peristiwa \'input\' dan \'change\' untuk Elemen input?

Input lwn. Peristiwa Perubahan untuk Elemen input

Elemen input dalam HTML membenarkan pengguna memasukkan dan mengedit teks. Ia menyokong dua pengendali acara: perubahan dan input. Kedua-dua peristiwa dicetuskan apabila kandungan teks elemen diubah, tetapi ia mempunyai perbezaan yang ketara dalam tingkah lakunya.

Acara 'input'

Acara input berlaku bila-bila masa sebarang perubahan dibuat pada kandungan teks elemen, termasuk:

• Menaip aksara
• Memadam aksara
• Memilih teks
• Menampal teks

Ia biasanya digunakan untuk mengesahkan data input dengan cepat dan memberikan maklum balas segera kepada pengguna.

Acara 'tukar'

Acara peristiwa perubahan berlaku apabila elemen kehilangan fokus selepas perubahan dibuat pada kandungan teks. Dalam erti kata lain, pengguna mesti mengubah suai teks dan mengalihkan fokus dari elemen sebelum peristiwa perubahan dicetuskan.

Selain kehilangan fokus, peristiwa perubahan juga mungkin dicetuskan oleh:

• Menekan kekunci Enter
• Memilih pilihan dalam lungsur turun
• Menukar keadaan kotak pilihan yang ditandai

Penggunaan dalam jQuery

Anda boleh melampirkan pendengar acara pada elemen input menggunakan jQuery seperti berikut:

$('input[type="text"]').on('change', function() {
    alert($(this).val());
});

// Equivalent to using 'input' instead of 'change'
$('input[type="text"]').on('input', function() {
    alert($(this).val());
});

Pemesanan Acara

Apabila kedua-dua input dan perubahan peristiwa dilampirkan pada elemen yang sama, ia akan dicetuskan dalam susunan berikut:

1. On Input: Triggered every time the text content changes
2. On Change: Triggered when the element loses focus after the text content changes

Tingkah laku ini membolehkan anda mengendalikan perubahan serta-merta dengan peristiwa input dan melakukan tindakan apabila elemen kehilangan fokus dengan peristiwa perubahan .

Contoh

Contoh berikut menunjukkan perbezaan antara peristiwa input dan perubahan:

$("input, select").on("input", function () {
    console.log("On input: " + this.tagName + " | " + this.value);
}).on("change", function () {
    console.log("On change: " + this.tagName + " | " + this.value);
});

Apabila menaip ke dalam input teks atau memilih pilihan dalam menu lungsur, anda akan melihat output berikut:

On input: INPUT | ...
On change: INPUT | ...

Perhatikan bahawa input dicetuskan dengan setiap ketukan kekunci atau perubahan aksara, manakala perubahan hanya dicetuskan apabila fokus hilang.

Atas ialah kandungan terperinci Apakah Perbezaan Antara Peristiwa \'input\' dan \'change\' untuk Elemen input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!