jquery如何監聽span元素的改變

本文小編為大家詳細介紹“jquery如何監聽span元素的改變”，內容詳細，步驟清晰，細節處理妥當，希望這篇“jquery如何監聽span元素的改變”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

jquery 監聽 span 元素改變的方法

我們先來看一下 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 監聽 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元素的改變”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。