TypeScript中的事件处理

Articles

TypeScript简介

TypeScript中的事件处理

本文介绍TypeScript中的事件处理。

通过示例代码，您可以学习事件处理方法和自定义事件。

YouTube Video

TypeScript中的事件处理

在TypeScript中处理事件的方法与JavaScript相同，但TypeScript提高了类型安全性，使您可以通过使用合适的事件类型安全地处理事件。事件处理的基础是为DOM元素添加事件监听器，并在用户操作时执行相应操作。

添加事件监听器

可用addEventListener方法为DOM元素添加事件监听器。例如，要处理点击事件，可以按如下操作：。

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}

在此代码中，addEventListener 用于在指定的 DOM 元素上注册点击事件的处理函数。

TypeScript中的事件类型

在TypeScript中，事件监听器收到的event对象会自动被赋予相应的类型。event对象根据事件类型拥有不同的属性，但其基本类型为Event。

通过为每种事件使用合适的类型，您可以在开发中充分利用TypeScript的类型安全性。

主要事件类型

Event Event是常见事件的基本类型。用于表单提交或页面加载完成等场景。

1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}

此代码检测表单的提交事件，阻止默认提交操作，并在控制台输出一条消息。

MouseEvent

MouseEvent是与鼠标操作相关的事件类型，例如点击和鼠标移动。可以获取鼠标坐标及被点击的按键信息。

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}

此代码在按钮点击时获取鼠标坐标，并在控制台显示。

KeyboardEvent KeyboardEvent是与键盘输入相关的事件类型。可以获取按下的按键和修饰键（Shift、Alt、Ctrl等）的状态。

1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});

此代码显示按下的键名，如果按下了Ctrl键，还会将信息输出到控制台。

InputEvent InputEvent是与输入框内容变化相关的事件类型。用于文本框或文本区域的值发生更改时。

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}

每次输入框内容变化时，此代码在控制台显示其内容。

FocusEvent FocusEvent是在元素获得或失去焦点时发生的事件类型。

 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}

当输入框获得焦点时，在控制台显示“Focused”；失去焦点时显示“Blurred”。

通过类型断言处理自定义事件

对于自定义事件或TypeScript无法推断类型的情况，可以通过类型断言显式指定类型。

例如，要处理特定输入框（HTMLInputElement）的事件，可以如下指定类型：。

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}

此代码使用类型断言，将事件目标视为HTMLInputElement，并在控制台显示其值。

移除事件监听器

可以使用removeEventListener移除事件监听器。为此，需要传递与初始添加时相同的事件处理函数。

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}

此代码为按钮添加点击事件监听器，然后通过指定相同的处理函数将其移除。

创建自定义事件

在TypeScript中，除了标准事件外，还可以创建和分发自定义事件。使用CustomEvent类创建自定义事件，并使用dispatchEvent方法触发。

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}

此代码使用CustomEvent创建自定义事件，将其派发到元素上，并在控制台显示其详细信息。

控制事件传播

事件发生时，默认会冒泡（传播到父元素）。要阻止这种情况，请使用event.stopPropagation()。还可以使用preventDefault()阻止浏览器的默认行为。

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}

此代码在按钮点击时禁止默认行为，阻止事件冒泡，并执行自定义处理。

总结

在TypeScript中事件处理基本与JavaScript相同，但通过合适的类型定义，可以更安全可靠地操作事件对象和DOM元素。通过添加和移除事件监听器、应用事件类型和使用类型断言，可以实现更清晰、不易出错的事件处理。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。请也查看我们的YouTube频道。

YouTube Video

TypeScript中的Shadow DOM 在 TypeScript 中使用 Fetch/XMLHttpRequest