内联onclick适合在线平台快速验证，但正式开发必须用addEventListener；需确保DOM加载完成再绑定，动态元素应采用事件委托，避免重复绑定。
直接在 HTML 文件里写 onclick 属性就能立刻看到点击效果，适合在线运行平台（如 JSBin、CodePen、JSFiddle）快速验证；但正式逻辑必须用 addEventListener，否则 DOM 加载顺序或重复绑定会导致行为异常。
内联 onclick 是最快验证方式，但仅限调试
在线运行环境加载快、无构建步骤，onclick 写在标签里最省事。比如：<button onclick="console.log('点到了')">测试按钮</button>。注意三点：
- 外层引号用双引号，内部字符串用单引号（或反过来），避免 HTML 解析中断
- 不能写
console.log('xxx')单独一行——它会立即执行，不是点击时才跑 - 不支持多行逻辑或变量复用，函数体一长就难维护
addEventListener 必须等 DOM 加载完才能用
在线平台默认把 JS 放在 或顶部，此时 document.getElementById('btn') 会返回 null，调用 addEventListener 就报 Cannot read property 'addEventListener' of null。解决办法只有两个：
- 把
<script></script>标签挪到前面（最简单） - 或者包一层
document.addEventListener('DOMContentLoaded', () => { /* 绑定代码 */ })
别信“加个 setTimeout 延迟 100ms”这种野路子——不可靠，尤其在低配设备上容易失效。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
动态添加的按钮只能靠事件委托
在线运行时如果用 JS 新增了按钮（比如点击一次生成一个新按钮），再对每个新按钮单独调 addEventListener 不现实。正确做法是监听父容器，用 e.target.matches() 判断是否点中目标：
document.getElementById('container').addEventListener('click', e => {
if (e.target.matches('button[data-action="delete"]')) {
console.log('删的是', e.target.dataset.id);
}
});这里 e.target.matches() 的参数必须是合法 CSS 选择器，不能写成 e.target.className === 'delete-btn'——后者无法匹配动态添加的元素，且忽略多 class 情况。
避免重复绑定监听器的坑
在线改代码常会反复运行同一段 JS，比如刷新后又执行一遍 btn.addEventListener('click', handler)，结果点一次触发多次。检查方法很简单：
- 在绑定前加个标记：给元素加
data-bound="true"，绑定前先if (!btn.hasAttribute('data-bound')) { ... } - 或者改用
btn.onclick = handler（但只支持单个监听器，不能叠加）
真正容易被忽略的是：在线平台的“重新运行”按钮往往不清除已注册的监听器，得手动刷新页面才能重置——这不是 bug，是浏览器原生行为。
