在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 });
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/477803.html
微信扫一扫