addEventListener基本写法为element.addEventListener('click', handler)，需确保事件名正确、传函数引用、元素已存在DOM中；绑定时机应选DOMContentLoaded而非window.onload；移除时须用相同函数引用及参数。
addEventListener 绑定事件的基本写法
直接用 addEventListener 绑定事件，比 onclick 等内联属性更灵活，也支持同一元素绑定多个同类型事件。关键不是“能不能绑”，而是“绑得对不对”——漏掉参数、写错事件名、没传函数引用，都会让事件不触发。
最简可用形式是：
element.addEventListener('click', handler);
注意三点：
• 第一个参数是字符串，必须是标准事件名（比如 'click'，不是 'onClick'）；
• 第二个参数是函数本身，别加括号（handler ✅，handler() ❌）；
• element 必须已存在于 DOM 中，否则会报 Cannot read property 'addEventListener' of null。
为什么点击没反应？常见绑定时机问题
页面还没加载完就去查元素，document.getElementById('btn') 返回 null，后续调用 addEventListener 就直接失败。这不是语法错，是执行时序错。
立即学习“前端免费学习笔记（深入）”；
- 把绑定代码放在
<script>标签末尾（即</body>前） - 或用
DOMContentLoaded事件包裹：
document.addEventListener('DOMContentLoaded', () => {
const btn = document.getElementById('btn');
btn.addEventListener('click', () => console.log('clicked'));
});
不用 window.onload——它等所有资源（图片、CSS）加载完才触发，太晚。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
事件对象 event 和 this 指向的区别
回调函数里拿到的 event 是浏览器自动传入的事件对象，含 target、currentTarget、preventDefault 等属性；而 this 默认指向绑定事件的元素（即 currentTarget），但若用箭头函数，this 就失效了。
所以：
- 要访问被点击的子元素（比如按钮里的图标），用
event.target - 要确保
this指向绑定元素，别用箭头函数写回调：btn.addEventListener('click', function() { console.log(this); })✅ - 需要阻止默认行为（如表单提交、链接跳转），必须显式调用
event.preventDefault()
移除事件监听器时的坑：匿名函数无法 remove
如果绑定时用了匿名函数：btn.addEventListener('click', () => {})，之后没法用 removeEventListener 移除——因为没有函数引用。
正确做法是：
- 把处理函数单独声明为变量或命名函数
- 移除时传入完全相同的函数引用和事件名
- 第三个参数（
options）也要一致，比如都设为{ once: true }或都不传
示例：
function handleClick() { console.log('done'); }
btn.addEventListener('click', handleClick);
// …后来想移除
btn.removeEventListener('click', handleClick);
容易忽略的是：同一个函数若在不同选项下绑定过多次（比如一次带 { capture: true }，一次不带），它们算两个独立监听器，得分别移除。
