onclick是内联事件，会覆盖、无法解绑、仅支持冒泡；addEventListener是标准绑定方式，支持多监听、可精确移除、能控制捕获与冒泡阶段。
onclick 属性和 addEventListener 的本质区别
直接写 onclick 是内联事件处理，它会把 JS 代码当字符串解析执行，相当于在全局作用域里 eval()；而 addEventListener 是标准事件绑定方式，支持多次监听、可移除、作用域清晰。两者不是“怎么用”的选择题，而是“该用哪个”的判断题——除非是极简原型或遗留代码，否则别碰内联 onclick。
用 addEventListener 替代 onclick 实现跳转
跳转本质是修改 window.location，关键在于绑定时机和目标元素是否存在。常见错误是脚本执行时 DOM 还没加载完，导致 getElementById 返回 null。
- 确保脚本放在
</body>前，或用DOMContentLoaded包裹 - 绑定前检查元素是否存在，避免
Cannot read property 'addEventListener' of null - 跳转用
window.location.href = url，不要用window.open()或location.assign()除非有明确需求（比如新窗口）
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('myBtn');
if (btn) {
btn.addEventListener('click', () => {
window.location.href = '/dashboard';
});
}
});
动态生成的按钮怎么绑定点击跳转
如果按钮是 AJAX 加载、Vue/React 渲染或 innerHTML 插入的，addEventListener 直接绑会失效——因为元素还没存在。这时必须用事件委托。
- 监听父容器（如
document或某个稳定存在的<div id="container">） - 用
event.target.matches('button[data-action="jump"]')精准识别触发源 - 避免用
onclick写在 HTML 字符串里，那会让逻辑和结构耦合，且容易 XSS
document.addEventListener('click', (e) => {
if (e.target.matches('button[data-url]')) {
window.location.href = e.target.dataset.url;
}
});
为什么 onclick="location.href='xxx'" 很危险
表面能跳转，但实际埋了三个坑：一是无法阻止默认行为（比如表单提交时想先校验），二是无法做异步操作（比如跳转前发个埋点请求），三是字符串拼接容易出错（URL 中含单引号就崩）。更隐蔽的问题是：当页面用了 CSP（Content-Security-Policy）禁止 unsafe-inline 时，所有内联 onclick 会被浏览器直接忽略，连报错都不会有。
立即学习“前端免费学习笔记（深入）”；
真正需要跳转逻辑复杂一点，比如带参数、要确认、或依赖 API 响应，内联写法就彻底不可维护了。
