JavaScript 雙重監聽機制深度解析：MutationObserver + addEventListener 的完美組合#

1
const observer = new MutationObserver(mutations => {
2
  mutations.forEach(mutation => {
3
    if (
4
      mutation.type === 'attributes' &&
5
      mutation.attributeName === 'value'
6
    ) {
7
      this.updateUserId(userIdInput.value)
8
    }
9
  })
10
})
11

12
observer.observe(userIdInput, {
13
  attributes: true,        // 監聽屬性變化
14
  attributeFilter: ['value'],  // 只監聽 value 屬性
15
})

1
userIdInput.addEventListener('input', () => {
2
  this.updateUserId(userIdInput.value)
3
})

1
// 情境 1：使用者打字
2
// 使用者在輸入框輸入 "12345"
3
// ✅ input 事件會觸發
4
// ❌ MutationObserver 不會觸發
5
// 原因：只有 .value 屬性變了，HTML value 屬性沒變
6

7
// 情境 2：JavaScript 直接設定 .value
8
userIdInput.value = '12345'
9
// ✅ input 事件會觸發
10
// ❌ MutationObserver 不會觸發
11
// 原因：程式化設定屬性，但沒有修改 DOM 屬性
12

13
// 情境 3：JavaScript 設定 DOM 屬性
14
userIdInput.setAttribute('value', '12345')
15
// ❌ input 事件不會觸發
16
// ✅ MutationObserver 會觸發
17
// 原因：直接修改了 DOM 的 value 屬性
18

19
// 情境 4：外部系統修改 HTML
20
// 例如：<input value="old"> 變成 <input value="new">
21
// ❌ input 事件不會觸發
22
// ✅ MutationObserver 會觸發
23
// 原因：整個 DOM 結構被更新

1
// 使用者在輸入框打字
2
// → input 事件處理
3
userIdInput.addEventListener('input', (e) => {
4
  console.log('使用者輸入:', e.target.value);
5
  this.updateUserId(e.target.value);
6
});

1
// 選擇用戶分類後自動填入用戶ID
2
function onCategorySelect(categoryData) {
3
  const userId = categoryData.defaultShopId;
4

5
  // 這會觸發 input 事件
6
  document.getElementById('userId').value = userId;
7
}

1
// 可能有其他系統直接修改 DOM
2
function updateFromExternalSystem(newShopId) {
3
  // 這會觸發 MutationObserver
4
  element.setAttribute('value', newShopId);
5
}

1
// 整個表單被重新渲染
2
function rerenderForm(formData) {
3
  const container = document.getElementById('form-container');
4

5
  // 這會觸發 MutationObserver
6
  container.innerHTML = `
7
    <input id="userId" value="${formData.userId}">
8
    <!-- 其他表單元素 -->
9
  `;
10
}

1
class UserIdMonitor {
2
  constructor(userIdInput) {
3
    this.userIdInput = userIdInput;
4
    this.setupDualListeners();
5
  }
6

7
  setupDualListeners() {
8
    // 1. MutationObserver 監聽 DOM 屬性變化
9
    const observer = new MutationObserver(mutations => {
10
      mutations.forEach(mutation => {
11
        if (
12
          mutation.type === 'attributes' &&
13
          mutation.attributeName === 'value'
14
        ) {
15
          console.log('DOM 屬性變化:', this.userIdInput.value);
16
          this.updateUserId(this.userIdInput.value);
17
        }
18
      });
19
    });
20

21
    observer.observe(this.userIdInput, {
22
      attributes: true,
23
      attributeFilter: ['value'],
24
    });
25

26
    // 2. addEventListener 監聽使用者互動
27
    this.userIdInput.addEventListener('input', () => {
28
      console.log('輸入事件觸發:', this.userIdInput.value);
29
      this.updateUserId(this.userIdInput.value);
30
    });
31
  }
32

33
  updateUserId(newValue) {
34
    console.log('User ID 更新為:', newValue);
35
    // 執行相關的業務邏輯
36
    this.processUserIdChange(newValue);
37
  }
38

39
  processUserIdChange(userId) {
40
    // 這裡放置實際的業務邏輯
41
    // 例如：更新用戶資料、重新計算權限等
42
  }
43
}
44

45
// 使用方式
46
const userIdInput = document.getElementById('userId');
47
const monitor = new UserIdMonitor(userIdInput);

1
class AdvancedUserIdMonitor {
2
  constructor(userIdInput, options = {}) {
3
    this.userIdInput = userIdInput;
4
    this.debounceTime = options.debounceTime || 300;
5
    this.debounceTimer = null;
6
    this.lastValue = userIdInput.value;
7

8
    this.setupDualListeners();
9
  }
10

11
  setupDualListeners() {
12
    // MutationObserver 監聽
13
    const observer = new MutationObserver(mutations => {
14
      mutations.forEach(mutation => {
15
        if (
16
          mutation.type === 'attributes' &&
17
          mutation.attributeName === 'value'
18
        ) {
19
          this.handleValueChange(this.userIdInput.value, 'attribute');
20
        }
21
      });
22
    });
23

24
    observer.observe(this.userIdInput, {
25
      attributes: true,
26
      attributeFilter: ['value'],
27
    });
28

29
    // addEventListener 監聽
30
    this.userIdInput.addEventListener('input', () => {
31
      this.handleValueChange(this.userIdInput.value, 'input');
32
    });
33

34
    // 儲存 observer 引用以便後續清理
35
    this.observer = observer;
36
  }
37

38
  handleValueChange(newValue, source) {
39
    // 避免重複處理相同的值
40
    if (newValue === this.lastValue) {
41
      return;
42
    }
43

44
    this.lastValue = newValue;
45
    console.log(`值變化 (${source}):`, newValue);
46

47
    // 防抖處理
48
    clearTimeout(this.debounceTimer);
49
    this.debounceTimer = setTimeout(() => {
50
      this.updateUserId(newValue);
51
    }, this.debounceTime);
52
  }
53

54
  updateUserId(newValue) {
55
    console.log('最終更新 User ID:', newValue);
56
    this.processUserIdChange(newValue);
57
  }
58

59
  processUserIdChange(userId) {
60
    // 驗證 userId
61
    if (!this.validateShopId(userId)) {
62
      console.warn('無效的 User ID:', userId);
63
      return;
64
    }
65

66
    // 執行業務邏輯
67
    this.fetchShopData(userId);
68
    this.updateUI(userId);
69
  }
70

71
  validateShopId(userId) {
72
    // User ID 驗證邏輯
73
    return userId && /^\d+$/.test(userId);
74
  }
75

76
  async fetchShopData(userId) {
77
    try {
78
      // 使用之前討論的 $.ajax 方法
79
      const result = await new Promise((resolve, reject) => {
80
        $.ajax({
81
          url: `https://api.example.com/v1/users/${userId}`,
82
          type: 'GET',
83
          dataType: 'json',
84
          xhrFields: {
85
            withCredentials: true
86
          }
87
        })
88
        .done(resolve)
89
        .fail((xhr, status, error) => {
90
          reject(new Error(`HTTP error! status: ${xhr.status}, error: ${error}`));
91
        });
92
      });
93

94
      this.handleShopData(result);
95
    } catch (error) {
96
      console.error('獲取用戶資料失敗:', error);
97
    }
98
  }
99

100
  handleShopData(data) {
101
    console.log('用戶資料:', data);
102
    // 處理獲取到的用戶資料
103
  }
104

105
  updateUI(userId) {
106
    // 更新相關 UI 元素
107
    const relatedElements = document.querySelectorAll('[data-user-dependent]');
108
    relatedElements.forEach(element => {
109
      element.textContent = `User: ${userId}`;
110
    });
111
  }
112

113
  // 清理方法
114
  destroy() {
115
    if (this.observer) {
116
      this.observer.disconnect();
117
    }
118
    if (this.debounceTimer) {
119
      clearTimeout(this.debounceTimer);
120
    }
121
  }
122
}
123

124
// 使用方式
125
const userIdInput = document.getElementById('userId');
126
const advancedMonitor = new AdvancedUserIdMonitor(userIdInput, {
127
  debounceTime: 500  // 500ms 防抖
128
});
129

130
// 頁面卸載時清理
131
window.addEventListener('beforeunload', () => {
132
  advancedMonitor.destroy();
133
});

1
// 避免過度觸發的防抖函數
2
function createDebouncer(func, delay) {
3
  let timeoutId;
4
  return function(...args) {
5
    clearTimeout(timeoutId);
6
    timeoutId = setTimeout(() => func.apply(this, args), delay);
7
  };
8
}
9

10
const debouncedUpdate = createDebouncer((value) => {
11
  this.updateUserId(value);
12
}, 300);

1
// 避免處理相同值的重複觸發
2
let lastValue = '';
3

4
function handleValueChange(newValue) {
5
  if (newValue === lastValue) {
6
    return; // 值沒有真正改變，忽略此次觸發
7
  }
8

9
  lastValue = newValue;
10
  debouncedUpdate(newValue);
11
}

1
// 確保適當清理監聽器
2
class SafeMonitor {
3
  constructor(element) {
4
    this.element = element;
5
    this.observer = null;
6
    this.boundHandler = this.handleInput.bind(this);
7
  }
8

9
  init() {
10
    // 設置監聽器
11
    this.setupListeners();
12

13
    // 註冊清理函數
14
    window.addEventListener('beforeunload', () => {
15
      this.cleanup();
16
    });
17
  }
18

19
  cleanup() {
20
    if (this.observer) {
21
      this.observer.disconnect();
22
      this.observer = null;
23
    }
24

25
    if (this.element) {
26
      this.element.removeEventListener('input', this.boundHandler);
27
    }
28
  }
29
}