HTML属性不支持多态，所谓“多态化交互”实为data-属性+事件委托+条件分支模拟的策略模式：用data-action等明确命名标识行为，统一处理；data-仅声明意图，不管理状态，状态同步需JS显式控制。
HTML 元素属性本身不支持“多态”——它没有继承、重载或运行时类型分发机制。所谓“多态化交互行为”，实际是靠 data- 属性 + 统一事件处理器 + 条件分支模拟出来的，本质是策略模式的手动实现。
用 dataset 提取行为标识符
把交互意图编码进 data-action、data-target 等属性里，而不是写一堆重复的 onclick="handleX()"：
-
data-action="delete"表示删除操作，data-action="edit"表示编辑，函数内统一 switch 分支 -
data-id="1024"和data-type="user"可组合出上下文，避免在 JS 里硬编码 DOM 路径 - 不要用
data-behavior="modal-open"这种模糊命名；优先用动词+名词结构，如data-action="show-modal"
单个 addEventListener 绑定多个行为
别给每个按钮单独绑 addEventListener，用事件委托 + event.target.dataset 派发：
- 监听父容器（比如
<div id="action-bar">），而非每个子按钮 <li>回调里先检查 <code>event.target.dataset.action是否存在，再做后续逻辑，避免点击空白区域报错 - 若需阻止默认行为（如
<a href="#"></a>），只对匹配到data-action的元素调用event.preventDefault() - 错误做法：靠
data-loading="true"控制按钮是否可点——这个值不会自动同步到disabled属性，UI 和逻辑会脱节 - 正确做法：用
data-action触发行为后，在 JS 中显式设置button.disabled = true并更新innerText - 需要响应式状态（如“已提交”“加载中”）时，必须手动维护并同步 DOM，HTML 属性不触发重渲染
- 空格、引号、换行会被截断或引发解析错误；传复杂值（如 JSON）建议先
encodeURIComponent，再在 JS 里decodeURIComponent -
dataset自动将短横线转驼峰（data-api-endpoint→event.target.dataset.apiEndpoint），别混用大小写 - 动态修改
dataset不会触发 DOM 变更事件，想监听变化得靠MutationObserver，一般没必要
属性值决定执行路径，但不能替代状态管理
data- 属性适合声明“做什么”，不适合表达“当前是什么状态”：
立即学习“前端免费学习笔记（深入）”；
注意浏览器对 data- 的解析限制
不是所有字符串都能安全当 data- 值用：
真正容易被忽略的是：这种“多态”只是表层复用，一旦行为逻辑开始共享状态（比如多个 data-action="toggle" 按钮要互斥），就得额外加协调代码——它不解决状态耦合问题，只把 if-else 搬到了 HTML 层。
