Wie JQuery Änderungen in Span-Elementen überwacht

Mit der Entwicklung der Webtechnologie wird die ereignisgesteuerte Frontend-Entwicklung immer wichtiger. Unter anderem bietet uns der beispiellose Beobachtermodus von jquery eine gute Lösung zur Ereignisüberwachung und erfreut sich bei Programmierern immer größerer Beliebtheit.

In diesem Artikel wird eine Methode zur Verwendung von jquery zur Überwachung von Änderungen im Span-Element vorgestellt, die es Entwicklern ermöglicht, den neuesten Wert des Span-Elements in Echtzeit abzurufen und so mehr Möglichkeiten für ereignisgesteuerte Programme bereitzustellen.

jquerys Methode zur Überwachung von Span-Elementänderungen

Werfen wir zunächst einen Blick auf die Event-Listening-Methode von jquery: .on(). In jquery können wir damit Ereignishandler registrieren. .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 监听 span 元素改变的功能了。

首先，我们要通过 jquery 获取要监听的 span 元素，然后利用原生 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 元素改变的方法，通过 MutationObserver 监听 span 元素的 innerText

Aber für das span-Element gibt es kein spezielles input-Ereignis wie das input-Element. Wir können jedoch Eingabeereignisse durch andere Ereignisse simulieren.

In diesem Artikel verwenden wir einen DOM-Listener namens [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver), um den innerText Attributänderungsereignis des span-Elements. #🎜🎜#

MutationObserver

#🎜🎜#MutationObserver ist ein neuer Typ von DOM-Listener, der von modernen Browsern unterstützt wird. Er kann Änderungen in jedem Knoten im DOM überwachen und über Rückruffunktionen auf diese Änderungen reagieren. #🎜🎜##🎜🎜#Die typische Verwendung von MutationObserver ist unten aufgeführt: #🎜🎜#rrreee#🎜🎜#Unter diesen ist callback eine Rückruffunktion, wenn das Zielelement oder seine Unterelemente verwendet werden ändern, wird die Callback-Funktion zurückgerufen. targetElement ist das zu überwachende DOM-Element und der Parameter config ist ein Konfigurationsobjekt, mit dem wir die Eigenschaften konfigurieren können, die überwacht werden sollen, wenn sich das Element ändert. #🎜🎜##🎜🎜#Für das Beispiel dieses Artikels hören wir uns das Attributänderungsereignis innerText des span-Elements an: #🎜🎜#rrreee#🎜🎜#Where, Mit „characterData: true“ code> können wir Änderungen im Inhalt des Zielelements überwachen, und mit dem Parameter „subtree: true“ können wir Änderungen in allen Nachkommenelementen des Zielelements überwachen. #🎜🎜##🎜🎜#Implementierung#🎜🎜##🎜🎜#Mit der oben genannten Grundlage können wir mit der Implementierung der Funktion der JQuery-Überwachung von Span-Elementänderungen beginnen. #🎜🎜##🎜🎜#Zuerst müssen wir das zu überwachende Span-Element über jquery abrufen und dann das native DOM-Objekt verwenden, um eine MutationObserver-Instanz zu erstellen. #🎜🎜#rrreee#🎜🎜#Als nächstes müssen wir das Jquery-Objekt in ein natives DOM-Objekt konvertieren. #🎜🎜#rrreee#🎜🎜#Schließlich fügen wir über die Methode <code>observe() das span-Element zum MutationObserver hinzu: #🎜🎜#rrreee#🎜🎜#Auf diese Weise, wenn der Inhalt des span-Elements auftritt. Wenn Änderungen auftreten, können wir die Änderungen über MutationObserver überwachen und den neuesten Inhalt in Echtzeit abrufen. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel wird eine Methode zur Verwendung von jquery zum Überwachen von Änderungen im Span-Element durch MutationObserver zum Überwachen des innerText-Attributänderungsereignisses von vorgestellt das Span-Element, wodurch der Zweck erreicht wird, den neuesten Wert des Span-Elements in Echtzeit zu erhalten. #🎜🎜##🎜🎜#Diese Methode lässt sich problemlos auf ereignisgesteuerte Programme anwenden und bietet Entwicklern mehr Möglichkeiten. #🎜🎜#

Das obige ist der detaillierte Inhalt vonWie JQuery Änderungen in Span-Elementen überwacht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!