js事件冒泡和事件委托

事件冒泡是指当一个元素上的事件被触发时，事件会从最内层的目标元素开始，逐级向上传播到父级元素，直到到达最顶层的祖先元素（通常是 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 中，如何优雅地进行跨组件通信，比如在深层嵌套的组件中传递数据。