Bagaimana jquery memantau perubahan dalam elemen span

Dengan pembangunan teknologi web, pembangunan bahagian hadapan dipacu acara menjadi semakin penting. Antaranya, mod pemerhati jquery yang tiada tandingan memberikan kami penyelesaian pemantauan acara yang baik, dan semakin popular di kalangan pengaturcara.

Artikel ini akan memperkenalkan kaedah menggunakan jquery untuk memantau perubahan dalam elemen span, membenarkan pembangun mendapatkan nilai terkini elemen span dalam masa nyata, memberikan lebih banyak kemungkinan untuk program dipacu peristiwa.

Cara jquery memantau perubahan elemen span

Mari kita lihat dahulu kaedah pemantauan acara jquery: .on(). Dalam jquery, kita boleh menggunakannya untuk mendaftar pengendali acara.

Namun, untuk elemen span, ia tidak mempunyai acara input istimewa seperti elemen input. Walau bagaimanapun, kami boleh mensimulasikan peristiwa input melalui acara lain.

Dalam artikel ini, kami akan menggunakan pendengar DOM bernama [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) untuk mendengar elemen span The innerText peristiwa penukaran atribut.

MutationObserver

MutationObserver ialah jenis pendengar DOM baharu yang disokong oleh penyemak imbas moden Ia boleh mendengar perubahan dalam mana-mana nod dalam DOM dan bertindak balas kepada perubahan ini melalui fungsi panggil balik.

Penggunaan biasa MutationObserver disenaraikan di bawah:

// 监听某个元素以及其子元素在 DOM 树中的所有变化
var observer = new MutationObserver(callback);
observer.observe(targetElement, config);

Antaranya, callback ialah fungsi panggil balik yang akan dipanggil apabila elemen sasaran atau sub-elemennya berubah . targetElement ialah elemen DOM yang akan dipantau dan parameter config ialah objek konfigurasi yang membolehkan kami mengkonfigurasi sifat untuk dipantau apabila elemen berubah.

Untuk contoh artikel ini, kita akan mendengar innerText peristiwa perubahan atribut elemen span:

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutationRecord) {
    console.log('innerText changed:', mutationRecord.target.innerText);
  });
});
observer.observe(document.getElementById('mySpan'), { characterData: true, subtree: true });

Antaranya, characterData: true membolehkan kita mendengar perubahan dalam kandungan elemen sasaran, subtree: true Parameter membolehkan kami memantau perubahan dalam semua elemen turunan elemen sasaran.

Pelaksanaan

Dengan asas di atas, kita boleh mula melaksanakan fungsi jquery untuk memantau perubahan elemen span.

Pertama, kita perlu mendapatkan elemen span untuk dipantau melalui jquery, dan kemudian gunakan objek DOM asli untuk mencipta contoh MutationObserver.

var $span = $('span');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutationRecord) {
    console.log('innerText changed:', mutationRecord.target.innerText);
  });
});

Seterusnya, kita perlu menukar objek jquery kepada objek DOM asli.

var span = $span[0];

Akhir sekali, melalui kaedah observe(), kami menambah elemen span pada MutationObserver:

observer.observe(span, { characterData: true, subtree: true });

Dengan cara ini, apabila kandungan elemen span berubah, kita boleh lulus MutationObserver memantau perubahan dan mendapat kandungan terkini dalam masa nyata.

Ringkasan

Artikel ini memperkenalkan kaedah menggunakan jquery untuk memantau perubahan dalam elemen span Ia memantau peristiwa perubahan atribut innerText elemen span melalui MutationObserver, dengan itu mencapai pemerolehan masa nyata. nilai terkini bagi elemen span.

Kaedah ini boleh digunakan dengan mudah pada program dipacu peristiwa, memberikan pembangun lebih banyak kemungkinan.

Atas ialah kandungan terperinci Bagaimana jquery memantau perubahan dalam elemen span. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!