本文详解 DOMContentLoaded 事件的常见误用场景，指出拼写错误、事件参数位置不当、preventDefault() 使用冗余等关键问题，并提供两种可靠解决方案：内联脚本置底与正确监听方式。
本文详解 `domcontentloaded` 事件的常见误用场景，指出拼写错误、事件参数位置不当、`preventdefault()` 使用冗余等关键问题，并提供两种可靠解决方案：内联脚本置底与正确监听方式。
在 Web 开发中，DOMContentLoaded 是一个至关重要的生命周期事件——它表示 HTML 文档已完全加载并解析完毕（不等待样式表、图片和子框架加载），此时 DOM 树已就绪，可安全执行节点查询与事件绑定。但初学者常因细节疏忽导致脚本失效，正如示例中点击按钮无响应的问题。
首先，原代码存在 三处关键错误：
- 拼写错误：document.addEventListner → 正确应为 document.addEventListener（少了一个 e）；
- 箭头函数语法误用：function(event) => { ... } 是非法语法，=> 仅用于箭头函数定义，不能与 function 混用；正确写法应为 function(event) { ... } 或 (event) => { ... }；
- event.preventDefault() 冗余且无效：click 事件默认不会触发页面跳转或表单提交，对普通 <button> 调用 preventDefault() 无实际作用；且该 event 对象来自 DOMContentLoaded，而非 click 事件，逻辑错位。
此外，虽然将 <script> 放在 <head> 中并监听 DOMContentLoaded 在技术上可行，但更推荐实践是将脚本置于 <body> 底部——这既避免了事件监听的必要性，又天然保障 DOM 就绪，代码更简洁、可读性更高：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document title</title>
</head>
<body>
<button id="red">Red</button>
<!-- 脚本置于 body 底部，DOM 已自然就绪 -->
<script>
document.querySelector('#red').addEventListener('click', function() {
this.style.backgroundColor = 'red'; // this 指向被点击的 button 元素
});
</script>
</body>
</html>若必须使用 DOMContentLoaded（例如需统一初始化多个模块），请确保语法严谨：
document.addEventListener('DOMContentLoaded', function() {
const button = document.querySelector('#red');
if (button) {
button.addEventListener('click', function(event) {
event.target.style.backgroundColor = 'red';
});
}
});✅ 最佳实践建议：
- 优先采用「脚本置底」方案，简单、高效、零依赖；
- 若需集中管理初始化逻辑，再使用 DOMContentLoaded，务必校验元素是否存在（if (button)），避免 null 引用错误；
- 避免在非表单/链接元素上滥用 preventDefault()；
- 使用现代语法如 const/let、this 或 event.target 提升可维护性。
掌握 DOM 加载时机与事件绑定的精确配合，是构建健壮前端交互的基础一步。
