jQueryがspan要素の変更を監視する方法

Web テクノロジーの発展に伴い、イベント駆動型のフロントエンド開発の重要性がますます高まっています。中でも、jquery の比類のないオブザーバー モードは、優れたイベント監視ソリューションを提供し、プログラマーの間でますます人気が高まっています。

この記事では、jquery を使用してスパン要素の変更を監視する方法を紹介します。これにより、開発者はスパン要素の最新の値をリアルタイムで取得できるようになり、イベント駆動型プログラムの可能性が高まります。

jquery のスパン要素の変更を監視するメソッド

まず、jquery のイベント リスニング メソッド .on() を見てみましょう。 jquery では、これを使用してイベント ハンドラーを登録できます。

ただし、span 要素には、input 要素のような特別な input イベントはありません。ただし、他のイベントを通じて入力イベントをシミュレートすることはできます。

この記事では、[MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) という名前の DOM リスナーを使用して、span 要素をリッスンします。 ##innerText プロパティ変更イベント。

MutationObserver

MutationObserver は、最新のブラウザでサポートされる新しいタイプの DOM リスナーで、DOM 内の任意のノードの変更を監視し、コールバック関数を通じてこれらの変更に応答できます。

MutationObserver の一般的な使用方法は次のとおりです:

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

このうち、

callback はコールバック関数であり、対象の要素またはそのサブ要素が変更されると、コールバックが呼び出されます。関数がコールバックされます。 targetElement は監視対象の DOM 要素で、config パラメータは、要素の変更時に監視するプロパティを構成できるようにする構成オブジェクトです。

この記事の例では、span 要素の

innerText 属性変更イベントをリッスンします:

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 });

そのうち、

characterData: true を使用すると、ターゲット要素の内容の変更をリッスンできます。subtree: true パラメーターを使用すると、ターゲット要素のすべての子孫要素の変更を監視できます。

実装

上記の基礎ができたら、スパン要素の変更を監視するjQuery機能の実装を開始できます。

まず、jquery を介して監視する spam 要素を取得し、ネイティブ DOM オブジェクトを使用して MutationObserver インスタンスを作成する必要があります。

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

次に、jquery オブジェクトをネイティブ DOM オブジェクトに変換する必要があります。

var span = $span[0];

最後に、

observe() メソッドを通じて、span 要素を MutationObserver に追加します。

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

このようにして、span 要素の内容が変更されると、 MutationObserver を通じて変更を監視し、最新のコンテンツをリアルタイムで取得できます。

概要

この記事では、jqueryを使用してspan要素の変更を監視する方法を紹介します。 -span要素の取得時間 最新値の目的。

この方法はイベント駆動型プログラムに簡単に適用できるため、開発者はより多くの可能性を得ることができます。

以上がjQueryがspan要素の変更を監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。