HTML中如何引入和执行JavaScript代码

本文深入解析了HTML中JavaScript代码引入与执行的关键细节，从script标签位置选择（头部defer、底部放置、async异步加载）到内外链脚本的取舍权衡，从事件绑定推荐方案（addEventListener优于onclick）到type属性的现代用法（module、JSON数据容器等），全面覆盖开发中高频踩坑点——如DOM未就绪导致null错误、事件覆盖、缓存失效、路径404、模块跨域失败等，并给出可直接落地的工程化建议，帮你写出稳定、可维护、不易半夜被报警叫醒的前端脚本。

script 标签写在哪儿，代码才真能跑起来

JavaScript 不是写进 HTML 就自动执行的，位置决定它能不能访问到 DOM、会不会报 Cannot read property 'xxx' of null。最稳妥的位置是 前——此时 HTML 已解析完，document.getElementById 才不会返回 null。

常见错误现象：Uncaught TypeError: Cannot set property 'onclick' of null，基本就是 script 放在 里又没加 defer 或事件监听逻辑。

• 放 ：必须加 defer（顺序执行、不阻塞 HTML 解析），或用 DOMContentLoaded 包裹操作 DOM 的代码
• 放 底部：最省心，适合小项目或内联脚本
• 放 + async：只适用于完全独立、不依赖 DOM 和其他脚本的代码（比如埋点 SDK）

内联 script 和外链 script 的实际区别

不是“哪种更好”，而是“哪一种不会让你半夜被报警电话叫醒”。内联脚本（）没有网络请求开销，但无法被浏览器缓存；外链（）可缓存、可压缩、可 sourcemap 调试，但多一次 HTTP 请求。

使用场景：index.html 中几行初始化逻辑（比如设置 localStorage 标志位）适合内联；所有业务逻辑、工具函数、第三方库必须外链。

• 外链时注意路径：相对路径以 HTML 当前位置为基准，不是 JS 文件位置 —— src="./js/main.js" 是对的，src="js/main.js" 在子目录页面可能 404
• 开发阶段建议加 type="module" 外链：自动启用严格模式、支持 import、顶层 this 为 undefined，避免意外污染全局
• 内联 script 如果含单引号，别用 ' 包整个 script，改用 " 或实体 '，否则 HTML 解析会提前截断

为什么 addEventListener 比 onclick 属性更可靠

直接写 看似简单，但会覆盖之前绑定的同名事件，且无法传参、无法移除、调试困难。现代写法一律用 addEventListener。

常见错误现象：点击按钮没反应，检查发现多个 onclick= 被后来的覆盖；或者 removeEventListener 失效，因为传入的函数不是同一个引用。

• 必须用命名函数或变量保存的函数引用才能正确移除：const handler = () => {}; btn.addEventListener('click', handler); btn.removeEventListener('click', handler);
• 匿名函数无法移除：btn.addEventListener('click', () => {}) —— 别这么写
• 需要一次性监听？加 { once: true } 选项，比手动 removeEventListener 更安全
• 事件委托场景下，别在每个子元素上绑 addEventListener，用父元素监听 + e.target 判断来源

script type="text/javascript" 还需要写吗

不需要。HTML5 中