onclick属性常失效因函数未定义、作用域错误、引号转义失败或CSP拦截；推荐用addEventListener动态绑定，注意DOM加载时机、避免重复绑定，并用e.target/e.currentTarget获取元素。
onclick 属性写法为什么经常失效
直接在 HTML 标签里写 onclick="doSomething()" 看似最简单，但实际容易出问题：函数未定义、作用域不对、HTML 转义失败（比如含单引号的字符串）、或被 CSP 策略拦截。
- 浏览器加载顺序没等 JS 就执行了
onclick，doSomething还没声明 → 报错Uncaught ReferenceError -
onclick里的代码运行在全局作用域，闭包变量、模块内函数都访问不到 - 如果 HTML 是服务端渲染或模板拼接的，引号嵌套容易漏转义：
onclick="alert('It's broken')"直接语法错误 - 现代项目普遍启用 CSP（Content-Security-Policy），
unsafe-inline默认被禁，onclick属性直接被忽略
addEventListener 是更可靠的选择
用 JS 动态绑定事件，能控制时机、作用域和清理逻辑，也兼容 CSP。
- 确保 DOM 加载完成再绑定：用
DOMContentLoaded或把脚本放
