Frontender Libs - обзор библиотек JS / CSS

Декоратор HostListener для работы с нестандартными пользовательскими событиями

В Angular декоратор @HostListener предоставляет удобный способ прослушивания событий, происходящих в DOM-элементах. Обычно он используется для стандартных событий, таких как клик, наведение мыши или прокрутка. Однако мало кто знает, что @HostListener можно использовать для регистрации и обработки нестандартных событий, включая те, что определены разработчиком, или даже событий, происходящих за пределами стандартных браузерных API.

Пример:

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-custom-event-listener',
  template: `<p>Нажмите Shift + K, чтобы сработало событие.</p>`
})
export class CustomEventListenerComponent {

  @HostListener('window:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    if (event.shiftKey && event.key === 'k') {
      console.log('Комбинация Shift + K нажата!');
      // Здесь можно вызывать любые действия
    }
  }
}

👉 @sWebDev

👍8❤1

www.tgoop.com/sWebDev/3251

1.36K viewsNov 4, 2024 at 07:43

Декоратор HostListener для работы с нестандартными пользовательскими событиями

В Angular декоратор @HostListener предоставляет удобный способ прослушивания событий, происходящих в DOM-элементах. Обычно он используется для стандартных событий, таких как клик, наведение мыши или прокрутка. Однако мало кто знает, что @HostListener можно использовать для регистрации и обработки нестандартных событий, включая те, что определены разработчиком, или даже событий, происходящих за пределами стандартных браузерных API.

Пример:

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-custom-event-listener',
  template: `<p>Нажмите Shift + K, чтобы сработало событие.</p>`
})
export class CustomEventListenerComponent {

  @HostListener('window:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    if (event.shiftKey && event.key === 'k') {
      console.log('Комбинация Shift + K нажата!');
      // Здесь можно вызывать любые действия
    }
  }
}

BY Frontender Libs - обзор библиотек JS / CSS