算。onclick等HTML事件属性属于内联JavaScript，浏览器会将其解析为动态生成的匿名函数，存在eval类风险，需确保函数全局可访问、避免多语句、注意参数传递安全及移动端延迟问题。
onclick 等事件属性写在 HTML 里，到底算不算“内联 JavaScript”
算。只要你在 onclick、onchange、onsubmit 这类属性里写了 JS 表达式或函数调用，浏览器就会在解析 HTML 时动态生成一个匿名函数包裹它——本质就是 eval 的变体，和直接写 <script>eval('alert(1)')</script> 同类风险。
常见错误现象：Uncaught ReferenceError: myHandler is not defined —— 函数在模块作用域或 const 声明下不可被全局访问；或者用了箭头函数、IIFE，根本没挂到 window 上。
- 必须确保被调用的函数是全局可访问的（比如声明为
function myHandler() {...}，而非const myHandler = () => {...}） - 避免在属性值里写多语句逻辑，比如
onclick="doA(); doB(); return false;"—— 可读性差、调试难、无法断点 - 如果用框架（React/Vue），这类写法会直接失效：JSX 不支持
onclick字符串，Vue 模板里要用@click
addEventListener 和 onclick 属性混用会冲突吗
不会冲突，但行为叠加且难以预测。DOM 元素上可以同时存在 onclick 属性值和多个通过 addEventListener 绑定的监听器，它们都会触发，顺序是：先执行 onclick 属性对应的函数，再按绑定顺序执行 addEventListener 的回调。
使用场景：老项目渐进升级时，可能一边保留原有 onclick，一边用现代方式加新逻辑。但一旦涉及 event.preventDefault() 或 event.stopPropagation()，谁先执行谁就可能拦截掉后续行为。
立即学习“前端免费学习笔记（深入）”；
-
onclick属性只能绑定一个处理函数；addEventListener可无限叠加 -
onclick的执行上下文this指向元素本身；addEventListener的this默认也是元素，但可用bind或箭头函数改写 - 移除监听时，
onclick = null可清除属性绑定；但addEventListener必须用对应函数引用才能removeEventListener，匿名函数无法清除
HTML 事件属性里怎么传参数（比如 id 或 data-*）
不能直接传变量，只能拼字符串。比如你想把 data-id="123" 的值传给处理函数，得手动写进属性值里：
button onclick="handleClick('123')"
这看着简单，但极易出错：引号嵌套混乱、特殊字符未转义、服务端渲染时 XSS 风险。
- 优先用
dataset+addEventListener：在 JS 里取event.target.dataset.id，安全又灵活 - 如果非要用内联方式，确保所有动态值经过
JSON.stringify处理，并用单引号包裹字符串参数（避免与 HTML 双引号冲突） - 别写
onclick="handleClick(this.dataset.id)"——this在内联属性里不指向元素，而是全局对象
移动端 click 延迟和 passive 选项的关系
原生 onclick 属性不受 {passive: true} 控制，因为它不是通过 addEventListener 绑定的。所谓 300ms 点击延迟，只影响 touchstart/touchend，而 click 事件本身是合成事件，延迟由浏览器对 touch 序列的判定逻辑决定。
真正能优化交互响应的，是用 addEventListener('click', handler, {passive: false}) 并配合 event.preventDefault()（仅限需要阻止默认滚动的场景），但这对 onclick 属性完全无效。
- 移动端想消灭延迟，要么用
fastclick库，要么统一走touchend+preventDefault，而不是依赖onclick -
passive: true是给touchstart/scroll用的，设给click会被忽略 - 现代 Chrome/Firefox 已对
click自动降级延迟（如 viewport meta 设置正确），但 iOS Safari 仍较保守
