在冒泡阶段统计按钮点击次数，需将事件监听器绑定到父容器并利用event.target识别被点击按钮，通过对象以按钮id为键记录次数，支持动态添加按钮且推荐用closest('button')提升健壮性。
在冒泡阶段统计按钮点击次数，关键在于把事件监听器绑定到按钮的**父元素（或更高层祖先）**，并利用事件冒泡机制捕获从按钮向上冒泡的 click 事件，同时通过事件对象的 target 属性识别出真正被点击的是哪个按钮。
1. 绑定监听器到父容器（启用冒泡捕获）
不要直接给每个按钮加 onclick 或 addEventListener('click', ...) —— 那属于目标阶段。要统计“在冒泡过程中发生的点击”，就应把监听器放在它们共同的父级（比如 <div id="btn-container">），并确保不阻止冒泡（默认就是冒泡的）：
<ul>
<li>使用 <code>addEventListener('click', handler, false)（第三个参数为 false 或省略）即表示在冒泡阶段监听
event.stopPropagation()，否则冒泡中断，父级收不到事件2. 在 handler 中识别并计数具体按钮
由于事件是从按钮发出、向上冒泡到父容器的，event.target 指向**原始触发点击的 DOM 元素**（即被点的按钮），而 event.currentTarget 指向当前绑定监听器的父容器。因此可在 handler 中做判断和计数：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 检查
event.target.matches('button')或event.target.tagName === 'BUTTON' - 用一个对象（如
clickCount = {}）以按钮的唯一标识（如id、dataset.id或event.target引用）为 key 记录次数 - 推荐用
event.target.id（需确保按钮有唯一 id）或event.target.dataset.btnId更可控
3. 示例代码（简洁可用）
HTML：
JavaScript：
const container = document.getElementById('container');const log = document.getElementById('log');
const count = {}; // 存储各按钮点击次数
container.addEventListener('click', (e) => {
if (e.target.matches('button')) {
const id = e.target.id;
count[id] = (count[id] || 0) + 1;
log.textContent = JSON.stringify(count, null, 2);
}
});
4. 注意事项
- 如果按钮是动态添加的，这种方法依然有效（事件委托优势），无需重新绑定
- 若按钮内含子元素（如图标、文字 span），
e.target可能是子元素而非 button —— 此时建议用e.target.closest('button')更健壮 - 想区分冒泡与捕获？可传
true作为第三个参数监听捕获阶段，但“冒泡阶段统计”明确要求用false
