高动态页面应以语义化HTML为基础，善用原生控件（如button、details、input[type]）替代div+JS，避免内联事件与contenteditable滥用，拖放需完整实现三要素并兼容移动端。
高动态页面不是靠堆 JS 实现的，而是靠 HTML 层面的结构合理性、语义准确性和属性可用性打下的基础。写得糙的 <div onclick="..."> 会拖慢渲染、阻塞主线程、难以调试，也挡不住 XSS 或焦点管理问题。
用语义化标签替代无意义的 <div> 嵌套
浏览器对 <button>、<input type="checkbox">、<details> 等原生控件有内置交互逻辑和可访问性支持，直接复用比手写 <div class="toggle"> + JS 更轻量、更可靠。
-
<button>自带 focus、space/enter 触发、disabled状态拦截，不用额外监听 keydown -
<details><summary>开箱即用折叠展开，无需 JS 控制aria-expanded或切换 class -
<input type="range">拖动时自动触发input事件，比监听mousemove+ 手算位置更精准、更省电 - 避免把
<span>或<div>加role="button"冒充控件——它不响应空格键，也不进 tab 顺序，屏幕阅读器识别率低
慎用内联 onclick，优先走 addEventListener
内联 onclick 在快速原型阶段有用，但在高动态页面中容易失控：无法解绑、无法批量管理、参数传入易出引号嵌套错误、调试时看不到绑定源。
- 多个同类按钮（如列表项操作）应统一委托到父容器，用
event.target.matches('.delete-btn')判断来源，而非每个都写onclick="delItem('id-1')" - 需要传参时，用
data-属性存 ID 或类型：<button data-id="123" data-action="archive">，JS 里统一取event.target.dataset.id - 若必须用内联，确保函数已定义且作用域可见；
onclick="handleClick(event)"中的event是全局变量，但 IE 不支持，别依赖它 - 禁止在同一个元素上同时写
onclick和addEventListener('click', ...)—— 后者不会叠加，而是覆盖前者行为
用 contenteditable 时注意输入捕获与安全边界
contenteditable="true" 让任意容器获得编辑能力，但它不发 input 事件，且默认允许执行脚本，生产环境必须设防。
立即学习“前端免费学习笔记（深入）”；
- 编辑结束靠
blur或keydown+setTimeout延迟捕获（因input不触发），不能只监听input - 若只需纯文本，设
contenteditable="plaintext-only"，它会自动 strip 格式粘贴，避免 Word 带来的冗余<span style="font-family: Calibri"> - 服务端接收前必须做 XSS 过滤，前端也建议用
textContent而非innerHTML渲染回显内容 - 移动端软键盘弹起后，
contenteditable元素可能被遮挡，需配合enterkeyhint="done"明确回车语义，并监听resize调整滚动位置
拖放交互必须配齐三要素：draggable + ondragstart + ondragover
draggable="true" 只是开关，没 JS 配合就只是个“能被拖但啥也不发生”的空壳。而且移动端完全不支持原生 drag API，这点常被忽略。
- 拖拽源必须在
ondragstart中调用event.dataTransfer.setData('text/plain', 'item-42')，否则目标区域收不到数据 - 目标容器必须监听
ondragover并立即执行event.preventDefault()，否则浏览器默认阻止 drop - drop 事件本身不带坐标信息，如需定位插入点，得结合
event.clientX/Y和目标容器getBoundingClientRect()手动计算 - 真要兼容 iOS / Android，得 fallback 到
touchstart→touchmove→touchend，并用 CSStransform: translate()模拟拖拽位移
高动态页面的 HTML 质量，最终体现在是否让 JS 只做“决策”而不做“搬运”。一个 <input type="date"> 比手写日历组件少 300 行代码、少 3 个 bug、少 20ms 渲染延迟——这不是偷懒，是尊重平台能力。
