内联事件如onclick="handleClick()"会立即执行而非点击时执行，因括号表示调用；必须全局函数、正确绑定select onchange、注意移动端兼容性；addEventListener需DOM就绪、传函数引用、小写事件名；动态元素应使用事件委托。
直接在 HTML 标签里写 onclick、onchange 这类属性，能快速让按钮或下拉框响应用户操作，但极易引发维护混乱、作用域错误和执行时机问题——它只适合原型验证或极简静态页，真实项目中应避免作为主力方案。
为什么 onclick="handleClick()" 会立即执行而不是点击时执行
这是最常踩的坑：括号 () 表示“现在就调用”，浏览器会在解析 HTML 时立刻执行该函数，而非等待用户点击。
- ❌ 错误写法：
onclick="handleClick()"→ 页面加载即触发一次 - ✅ 正确写法：
onclick="handleClick"或onclick="handleClick(event)" - 内联事件里的函数必须是全局可访问的；闭包内定义的函数无法被字符串形式调用
- IE8 及更早版本会把该字符串丢进全局作用域执行，容易污染
window，引发命名冲突
select 元素必须绑定 onchange 到自身，不能绑在 option 上
onchange 是 <select></select> 的原生事件，不是 <option></option> 的。绑错位置会导致完全无响应。
- ❌ 无效写法：
<option onchange="doSomething()">北京</option> - ✅ 正确位置：
<select id="city" onchange="handleCityChange()"><option>...</option></select> - 注意：只有用户手动切换选项且值真正改变时才触发；程序赋值
select.value = 'sh'不会触发onchange - 移动端 Safari 对
<div> 默认不响应点击，需加 <code>cursor: pointer或监听touchstartaddEventListener 绑定失败的三个高频原因
不是语法错，而是运行时条件不满足——90% 的“点不动”都卡在这三处。
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
-
document.getElementById('btn')返回null：DOM 尚未加载完成，建议用DOMContentLoaded包裹，而非window.onload - 传了函数调用而非函数引用：
btn.addEventListener('click', handleClick())❌（带括号）→ 应为handleClick✅ - 事件名写错：
'onClick'或'Click'都无效，必须是小写标准名'click'、'change'、'input'等 - 移除监听器时，
removeEventListener必须使用与绑定时**完全相同的函数引用**，箭头函数无法复用，建议提前声明命名函数
动态插入元素时事件绑定失效怎么办
新插入的 DOM 节点不会自动继承原有事件绑定，
addEventListener对它无效——除非你用事件委托。- 不要对每个新元素单独绑定：
newBtn.addEventListener('click', ...)→ 容易漏绑、内存泄漏 - 改用父级委托：
container.addEventListener('click', e => { if (e.target.matches('.dynamic-btn')) { /* 处理 */ } }) - jQuery 的
$(parent).on('click', '.dynamic-btn', handler)本质也是事件委托，但依赖库 - 注意：委托目标必须是已存在、不会被销毁的父容器；若父级也动态生成，得往上找更稳定的祖先节点（如
document）
真正难的不是“怎么绑”，而是判断该用哪种方式——静态页面用内联属性图快，组件化项目必须用
addEventListener+ 事件委托，而跨框架通信时还得考虑自定义事件与 Shadow DOM 边界。别省那几行代码，结构松耦合比当场跑通重要得多。 -
