script 放在底部更安全，因浏览器自上而下解析 html，若 script 在 head 中调用未渲染的 dom 元素会返回 null，导致事件绑定失败；移至 body 底部或用 domcontentloaded 事件可解决。

为什么 script 放在 底部比 更安全

因为浏览器解析 HTML 是从上到下顺序执行的，script 如果放在

里，而脚本中又调用了 document.getElementById('btn') 这类 DOM 查询，此时页面还没解析到那个按钮元素，结果就是返回 null，后续绑定事件或操作直接失败。

常见错误现象：TypeError: Cannot add property onclick, object is not extensible 或控制台报 Cannot read property 'addEventListener' of null。

• 把 <script></script> 标签移到 前是最简单有效的解法
• 若必须放 ，改用 DOMContentLoaded 事件包裹逻辑：document.addEventListener('DOMContentLoaded', () => { /* 你的代码 */ });
• 避免使用 window.onload——它要等所有资源（图片、CSS）加载完才触发，延迟更明显

document.querySelector 和 document.getElementById 的选择差异

两者都能取元素，但行为和适用场景不同：前者靠 CSS 选择器，灵活但慢一点；后者靠 ID，快且唯一，但要求 ID 全局不重复。

容易踩的坑：querySelector 返回第一个匹配项，如果页面有多个 <button class="submit"></button>，它只拿到第一个；而 getElementById 遇到重复 ID 时行为未定义（多数浏览器取第一个，但不符合 HTML 规范）。

• 优先用 getElementById 处理单个关键控件（如提交按钮、主输入框）
• 用 querySelector 处理带条件的查找，比如 document.querySelector('form#login input[name="email"]')
• 批量操作用 querySelectorAll，它返回 NodeList，需用 forEach 遍历

addEventListener 绑定 click 时 this 指向丢失问题

写成 btn.addEventListener('click', function() { this.style.color = 'red'; }) 看似没问题，但如果这个函数被抽出来复用，this 就不再指向按钮——尤其在箭头函数或作为回调传入时。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

根本原因是传统函数的 this 由调用方式决定，而事件监听器内部调用时，this 默认是触发该事件的元素；一旦脱离上下文，就变成 window 或 undefined（严格模式）。

• 最稳妥写法：用事件对象 e.target 明确取触发元素，btn.addEventListener('click', (e) => e.target.style.color = 'red');
• 如果必须用命名函数，绑定时用 .bind(btn) 或改用箭头函数闭包捕获
• 避免直接赋值 btn.onclick = handler，它不支持多监听器，且覆盖已有逻辑

表单 input 实时验证该监听 input 还是 blur

input 事件每敲一个键就触发，适合做实时反馈（如密码强度提示）；blur 是失去焦点时触发，适合最终校验（如邮箱格式确认）——选错会带来性能或体验问题。

性能影响明显：input 在中文输入法下可能频繁触发（每选一个候选词都算一次），没节流的话会导致卡顿；blur 则只在用户明确离开字段时执行，更轻量。

• 邮箱/手机号等格式验证，推荐用 blur + 提交前二次检查
• 搜索框自动补全、字符计数这类场景，用 input，但务必加 setTimeout 防抖
• 不要混用：oninput 内联属性已过时，一律走 addEventListener

DOM 加载时机、选择器精度、事件上下文、输入时机——这四个点串起来，才是真实项目里最容易出错又最难定位的交互链。写的时候多看一眼控制台报错来源，比翻文档更快。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南