addEventListener是JavaScript注册事件监听器的推荐方式，支持灵活配置options（如capture、once、passive），需用相同函数引用移除监听器，普通函数中this指向绑定元素，事件对象提供target、currentTarget等属性。
在 JavaScript 中，addEventListener 是注册标准事件监听器的推荐方式，它比 onclick 等内联属性或传统事件处理函数更灵活、可维护性更强。
基本用法：绑定单个事件
语法很简单：
element.addEventListener(type, listener[, options]);
其中：
-
type：字符串，表示事件类型（如
"click"、"input"、"keydown"），不带"on"前缀； -
listener：回调函数（也可以是实现了
handleEvent方法的对象）； -
options（可选）：一个布尔值（旧写法，等价于
{ once: false, capture: false }）或配置对象，常用字段有capture、once、passive。
示例：
const btn = document.getElementById("myBtn");
btn.addEventListener("click", function(e) {
console.log("按钮被点击了", e.target);
});
避免重复绑定和正确移除监听器
同一个元素上对同一事件类型多次调用 addEventListener，若传入的是**不同函数引用**，会注册多个监听器。因此：
- 要移除监听器，必须使用**完全相同的函数引用**（不能是匿名函数或箭头函数，除非提前保存）；
- 推荐将监听器定义为具名函数或变量，方便复用和清理。
正确做法：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
function handleClick(e) {
console.log("处理点击");
}
btn.addEventListener("click", handleClick);
// 后续可安全移除
btn.removeEventListener("click", handleClick);
错误写法（无法移除）：
btn.addEventListener("click", () => console.log("无法移除")); // 箭头函数每次都是新引用
利用 options 配置高级行为
第三个参数不只是布尔值，现代浏览器支持对象配置：
-
capture: true：在捕获阶段触发（默认为false，即冒泡阶段）； -
once: true：监听器只执行一次，自动移除； -
passive: true：告诉浏览器监听器不会调用e.preventDefault()（常用于touchstart/wheel提升滚动性能）。
示例（防抖 + 一次执行）：
btn.addEventListener("click", function handler(e) {
console.log("只触发一次");
}, { once: true });
监听器中的 this 和事件对象
在普通函数监听器中，this 指向绑定事件的元素（即 element）；箭头函数中 this 是词法作用域的 this，不绑定元素，需用 e.currentTarget 替代。
事件对象 e（或任意形参名）包含关键信息：
-
e.target：实际触发事件的元素（可能为子元素）； -
e.currentTarget：当前绑定监听器的元素（即this）； -
e.preventDefault()：阻止默认行为； -
e.stopPropagation()：阻止事件继续传播（冒泡/捕获）。
