Comment jquery surveille les changements dans les éléments span

Avec le développement de la technologie Web, le développement front-end événementiel devient de plus en plus important. Parmi eux, le mode observateur sans précédent de jquery nous offre une bonne solution de surveillance des événements et devient de plus en plus populaire parmi les programmeurs.

Cet article présentera une méthode d'utilisation de jquery pour surveiller les modifications des éléments span, permettant aux développeurs d'obtenir la dernière valeur des éléments span en temps réel, offrant ainsi plus de possibilités pour les programmes événementiels.

Méthode jquery de surveillance des changements d'éléments span

Jetons d'abord un coup d'œil à la méthode d'écoute des événements de jquery : .on(). En jquery, nous pouvons l'utiliser pour enregistrer des gestionnaires d'événements. .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

Mais pour l'élément span, il n'a pas d'événement input spécial comme l'élément input. Cependant, nous pouvons simuler des événements d'entrée via d'autres événements.

Dans cet article, nous utiliserons un écouteur DOM nommé [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) pour écouter le de l'élément span Événement de changement de propriété innerText. 🎜

MutationObserver

🎜MutationObserver est un nouveau type d'écouteur DOM pris en charge par les navigateurs modernes. Il peut surveiller les changements dans n'importe quel nœud du DOM et répondre à ces changements via des fonctions de rappel. 🎜🎜L'utilisation typique de MutationObserver est répertoriée ci-dessous : 🎜rrreee🎜Parmi eux, callback est une fonction de rappel qui sera rappelée lorsque l'élément cible ou ses sous-éléments changent. targetElement est l'élément DOM à surveiller, et le paramètre config est un objet de configuration qui nous permet de configurer les propriétés à surveiller lorsque l'élément change. 🎜🎜Pour l'exemple de cet article, nous écouterons l'événement de changement d'attribut innerText de l'élément span : 🎜rrreee🎜Parmi eux, characterData: true nous permet d'écouter aux changements dans le contenu de l'élément cible, le paramètre subtree: true nous permet de surveiller les changements dans tous les éléments descendants de l'élément cible. 🎜🎜Implémentation🎜🎜Avec la base ci-dessus en place, nous pouvons commencer à implémenter la fonction de jquery de surveillance des changements d'éléments span. 🎜🎜Tout d'abord, nous devons faire en sorte que l'élément span soit surveillé via jquery, puis utiliser l'objet DOM natif pour créer une instance MutationObserver. 🎜rrreee🎜Ensuite, nous devons convertir l'objet jquery en un objet DOM natif. 🎜rrreee🎜Enfin, grâce à la méthode observe(), nous ajoutons l'élément span au MutationObserver : 🎜rrreee🎜De cette façon, lorsque le contenu de l'élément span change, nous pouvons écouter le changement via MutationObserver, et obtenez le dernier contenu en temps réel. 🎜🎜Résumé🎜🎜Cet article présente une méthode d'utilisation de jquery pour surveiller les modifications dans l'élément span. Il utilise MutationObserver pour surveiller l'événement de changement d'attribut innerText de l'élément span, atteignant ainsi l'objectif d'obtenir l'attribut span. dernière valeur de l'élément span en temps réel. 🎜🎜Cette méthode peut être facilement appliquée aux programmes événementiels, offrant ainsi aux développeurs plus de possibilités. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!