TypeScript中addEventListener的用法
- 行业动态
- 2024-04-15
- 4212
在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 });
本站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本站,有问题联系侵删!
本文链接:http://www.xixizhuji.com/fuzhu/290645.html