隨著 web 技術的發展，前端開發中的事件驅動越來越重要。其中，jquery 天下無雙的觀察者模式為我們提供了很好的事件監聽解決方案，也越來越受到程式設計師的歡迎。
本文將介紹一種利用 jquery 監聽 span 元素改變的方法，使開發者能夠即時取得 span 元素的最新值，為事件驅動的程式提供更多的可能性。
我們先來看看 jquery 的事件監聽方法：.on()。在 jquery 中，我們可以用它來註冊事件處理函數。
不過對於 span 元素來說，它並不像 input 元素一樣有特殊的 input 事件。但是，我們可以透過其它事件來模擬輸入事件。
在本文中，我們將利用一個名為[MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) 的DOM 監聽器，監聽span 元素的innerText 屬性變化事件。
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 屬性變化事件，從而實現即時取得span 元素的最新值的目的。
這種方法可以方便地應用於事件驅動的程式中，為開發者提供更多的可能性。
以上是jquery怎麼監聽span元素的改變的詳細內容。更多資訊請關注PHP中文網其他相關文章！
