TypeScript中addEventListener的用法

admin
行业动态
2024-04-15
2837

在TypeScript中，addEventListener用于向指定的HTML元素添加事件监听器，以下是关于addEventListener的详细用法：

TypeScript中addEventListener的用法第1张

基本用法

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 });