事件冒泡是指當一個元素上的事件被觸發時，事件會從最內層的目標元素開始，逐級向上傳播到父級元素，直到到達最頂層的祖先元素（通常是 document 對象）。這是一種默認的事件傳播方式。

示例：

html復制代碼<div id="parent">
    <button id="child">Click me</button>
</div>
javascript復制代碼const parent = document.getElementById('parent');
const child = document.getElementById('child');
?
parent.addEventListener('click', () => {
    console.log('Parent clicked');
});
?
child.addEventListener('click', () => {
    console.log('Child clicked');
});

執行結果：

1. 點擊 child 按鈕時，會先輸出 "Child clicked"，然后輸出 "Parent clicked"。這就是事件冒泡的效果。

事件委托（Event Delegation）

事件委托是利用事件冒泡的特性，將一個事件處理程序添加到父元素上，而不是給每個子元素分別添加事件處理程序。當事件發生時，事件處理程序會檢查事件的目標元素，并對特定的子元素進行處理。事件委托可以有效減少內存消耗，提高性能，尤其是在處理大量動態子元素時。

示例：

html復制代碼<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
javascript復制代碼const list = document.getElementById('list');
?
list.addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
        console.log(`Clicked on ${event.target.textContent}`);
    }
});

執行結果：

1. 無論點擊 list 內的哪個 li 元素，都會觸發 list 上的點擊事件處理程序，并且只對點擊的 li 元素進行處理。

主要區別

1. 定義：

   • 事件冒泡：是事件傳播的一種方式，事件從目標元素向上傳播到祖先元素。

   • 事件委托：是一種編程技巧，通過事件冒泡機制，將事件處理程序添加到父元素上，利用事件目標來處理特定的子元素。

2. 目的：

   • 事件冒泡：描述事件傳播的機制。

   • 事件委托：優化事件處理，減少內存消耗，尤其適用于處理大量動態生成的子元素。

3. 用法：

   • 事件冒泡：是瀏覽器事件模型的一部分，自動發生。

   • 事件委托：是開發者通過編程實現的技巧，利用事件冒泡機制來簡化事件處理。

事件委托的優點

• 性能優化：減少需要綁定的事件處理程序的數量，降低內存消耗。

• 動態元素處理：方便處理動態添加或刪除的子元素的事件。

• 簡化代碼：減少重復代碼，使代碼更加簡潔和易于維護。

事件委托的缺點

• 限制：不適用于不支持冒泡的事件（如 blur 和 focus 事件）。

• 復雜度：需要手動檢查事件目標，增加了代碼的復雜度。

總結

• 事件冒泡是事件傳播機制的一部分，描述了事件從目標元素向上傳播的過程。

• 事件委托是一種編程技巧，利用事件冒泡機制，通過在父元素上綁定事件處理程序來處理子元素的事件。

用鏈表實現兩數相加

在鏈表中實現兩數相加的一個經典問題就是在兩個鏈表中，每個節點代表一個數字的位，兩個鏈表代表兩個非負整數。數字以逆序存儲，每個節點包含一個數字。將兩個數相加并返回一個新的鏈表表示結果。

javascript復制代碼class ListNode {
    constructor(val = 0, next = null) {
        this.val = val;
        this.next = next;
    }
}
?
function addTwoNumbers(l1, l2) {
    let dummy = new ListNode();
    let current = dummy;
    let carry = 0;
?
    while (l1 !== null || l2 !== null) {
        let sum = carry;
?
        if (l1 !== null) {
            sum += l1.val;
            l1 = l1.next;
        }
?
        if (l2 !== null) {
            sum += l2.val;
            l2 = l2.next;
        }
?
        carry = Math.floor(sum / 10);
        current.next = new ListNode(sum % 10);
        current = current.next;
    }
?
    if (carry > 0) {
        current.next = new ListNode(carry);
    }
?
    return dummy.next;
}

項目中的難點問題

1. 狀態管理：在使用 Redux 時，如何高效地管理復雜的狀態樹，并確保組件間狀態的一致性和數據流的合理性。

2. 實時數據更新：實現 WebSocket 來進行實時數據傳輸，確保數據能夠及時、準確地反映在前端頁面上。

3. 組件復用：設計可復用的組件，以減少重復代碼，提高開發效率和維護性。

4. 性能優化：對 React/Vue 組件進行性能優化，如避免不必要的重新渲染、懶加載等。

5. 跨組件通信：在 Vue 和 React 中，如何優雅地進行跨組件通信，比如在深層嵌套的組件中傳遞數據。

6.