Этот пост проиллюстрирует «event.target» и его использование в JavaScript.
Что такое «event.target» в JavaScript?
“ событие.цель ” является свойством/атрибутом “ событие 'в JavaScript. Он относится к элементу, вызвавшему событие. Чтобы получить доступ к атрибуту event.target, необходимо прослушать событие элемента. “ добавить прослушиватель событий () ” используется для прослушивания определенного события.
Синтаксис
Для использования свойства «event.target» следуйте указанному синтаксису:
элемент. addEventListener ( '<событие>' , функция ( событие ) {
консоль. бревно ( событие. цель )
} )
В заданном синтаксисе
- “ добавить прослушиватель событий () ” используется для добавления обработчика событий для определенного элемента.
- “ <событие> ” указывает любое событие, такое как “ нажмите », « наведение мыши ', и так далее.
Пример
В данном примере мы получим элемент, вызвавший событие, используя « событие.цель ' свойство.
Здесь мы создадим кнопку, назначив идентификатор « бтн », который используется в JavaScript для доступа к кнопке:
< идентификатор кнопки '=' 'кнопка' > Кликните сюда кнопка >
В файле JavaScript сначала мы получим ссылку на кнопку, используя назначенный ей идентификатор с помощью « получитьэлемент по идентификатору() метод:
константа кнопка '=' документ. получитьэлементбиид ( 'бтн' ) ;Прикрепите прослушиватель событий с помощью кнопки. “ нажмите » событие инициируется нажатием кнопки, и объект события передается прослушивателю событий в качестве аргумента. “ событие.цель Атрибут доступен из функции слушателя, чтобы получить ссылку на элемент кнопки, вызвавший событие:
кнопка. addEventListener ( 'щелкнуть' , функция ( событие ) {консоль. бревно ( «Целевое событие:» , событие. цель ) ;
} ) ;
Вывод показывает ссылку на конкретную кнопку, которая нажата:
Вы можете получить дополнительную информацию и применить различные функции, такие как стилизация целевого события, используя его атрибуты.
Каковы атрибуты «event.target»?
Существуют различные атрибуты свойства «event.target», которые предоставляют информацию о целевом элементе. Вот некоторые из общих атрибутов объекта event.target:
| event.target Атрибуты | Описание |
| event.target.tagname | Используется для получения “ имя ” тега HTML целевого элемента. |
| событие.цель.значение | Используйте для получения “ ценить » целевого элемента. Этот атрибут в основном используется для элементов ввода. |
| event.target.id | За получение « идентификатор » целевого элемента, используйте данный атрибут. |
| event.target.classList | Список « классы », содержащий целевой элемент, доступен с помощью этого атрибута. |
| event.target.textContent | Используется для получения “ текстовое содержание » целевого элемента. |
| event.target.href | Этот атрибут извлекает « href » атрибут целевого элемента, например ссылки. |
| событие.target.style | Для изменения « CSS » целевого элемента, используйте этот атрибут. |
Пример 1: изменение цвета фона целевого элемента
В приведенном примере мы изменим цвет фона целевого элемента, используя « стиль ” атрибут на “ нажмите ' событие:
константа кнопка '=' документ. получитьэлементбиид ( 'бтн' ) ;кнопка. addEventListener ( 'щелкнуть' , функция ( событие ) {
событие. цель . стиль . фоновый цвет '=' 'синий' ;
} ) ;
Выход
Пример 2: получение значения целевого элемента
Создайте поле ввода текста и область для отображения текста с помощью тега
. Назначьте идентификаторы полю ввода и тегу
как « взять ввод ' и ' показывать ', соответственно:
< тип ввода '=' 'текст' идентификатор '=' 'возьми ввод' >< идентификатор p '=' 'показывать' > п >
Получите ссылку на текстовое поле, используя « получитьэлемент по идентификатору() метод:
был введен '=' документ. получитьэлементбиид ( 'возьми ввод' ) ;Использовать ' ценить ” с атрибутом “ событие.цель », чтобы получить значение целевого элемента:
вход. addEventListener ( 'вход' , ( событие ) => {документ. получитьэлементбиид ( 'показывать' ) . внутреннийHTML '=' событие. цель . ценить ;
} )
Как вы можете видеть, значение, введенное в текстовое поле, было успешно получено с помощью « ценить атрибут:
Это все, что касается «event.target» в JavaScript.
Заключение
“ событие.цель ” относится к элементу, который вызвал/инициировал событие. Есть некоторые атрибуты свойства «event.target», которые предоставляют информацию о целевом элементе. Например, ' event.target.tagname », « .ценить », « .идентификатор », « .стиль ', и так далее. Этот пост иллюстрирует «event.target», его атрибуты и использование в JavaScript.