在TypeScript中，addEventListener用于向指定的HTML元素添加事件监听器，以下是关于addEventListener的详细用法：
基本用法
1、为HTML元素添加事件监听器
2、指定事件类型（如：click、mousedown等）
3、定义事件处理函数
4、可选：传递事件参数
示例代码
// 获取HTML元素
const button = document.querySelector('button');
// 定义事件处理函数
function handleClick() {
console.log('按钮被点击了！');
}
// 为HTML元素添加事件监听器
button.addEventListener('click', handleClick);
使用表格归纳addEventListener的参数
| 参数 |
类型 |
描述 |
| event |
string |
要监听的事件类型，如：’click’、’mousedown’等 |
| listener |
function |
当事件触发时要执行的函数 |
| useCapture |
boolean |
是否在捕获阶段调用事件处理函数，默认为false（冒泡阶段） |
| options |
EventListenerOptions |
可选参数，用于配置事件处理函数的调用方式和性能优化 |
EventListenerOptions参数详解
| 参数 |
类型 |
描述 |
| capture |
boolean |
是否在捕获阶段调用事件处理函数，默认为false（冒泡阶段） |
| once |
boolean |
是否只调用一次事件处理函数，默认为false |
| passive |
boolean |
是否将事件的被动模式设置为true，以优化滚动性能，默认为false |
| preventDefault |
boolean |
是否阻止事件的默认行为，默认为false |
| stopPropagation |
boolean |
是否阻止事件冒泡，默认为false |
示例代码（包含EventListenerOptions参数）
// 获取HTML元素
const button = document.querySelector('button');
// 定义事件处理函数
function handleClick(event: Event) {
event.preventDefault(); // 阻止事件的默认行为（如：提交表单）
console.log('按钮被点击了！');
}
// 为HTML元素添加事件监听器，并设置参数
button.addEventListener('click', handleClick, { capture: true, once: true, passive: true });
