Обработка событий в TypeScript

Articles

В этой статье объясняется обработка событий в TypeScript.

Вы сможете узнать о методах обработки событий и пользовательских событиях на примерах кода.

YouTube Video

Обработка событий в TypeScript

Обработка событий в TypeScript выполняется так же, как и в JavaScript. Однако TypeScript улучшает типобезопасность, позволяя безопасно работать с событиями с использованием соответствующих типов событий. Основы обработки событий включают добавление обработчиков событий к элементам DOM и выполнение действий в ответ на действия пользователя.

Добавление обработчиков событий

Обработчики событий добавляются к элементам DOM с помощью метода addEventListener. Например, чтобы обработать событие клика, вы можете сделать следующее:.

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 — тип события, связанный с изменениями в полях ввода. Используется, когда изменено значение текстового поля или textarea.

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. Добавляя и удаляя обработчики событий, применяя типы событий и используя утверждения типа, вы делаете обработку событий более понятной и менее подверженной ошибкам.

Вы можете следовать этой статье, используя Visual Studio Code на нашем YouTube-канале. Пожалуйста, также посмотрите наш YouTube-канал.

YouTube Video

Shadow DOM в TypeScript Получение/XMLHttpRequest в TypeScript