Проверьте, имеет ли event.target определенный класс, используя JavaScript

Prover Te Imeet Li Event Target Opredelennyj Klass Ispol Zua Javascript



Иногда программист может захотеть проверить, соответствует ли элемент, вызвавший событие (event.target), интересующему его селектору. Как это сделать? JavaScript предлагает некоторые предопределенные методы, такие как « содержит() ' а также ' Спички() ” для определения конкретного селектора в целевом событии.

В этом посте будут объяснены методы определения того, имеет ли event.target определенный класс или не использует JavaScript.

Как проверить, имеет ли event.target определенный класс с помощью JavaScript?

Чтобы определить, имеет ли event.target определенный класс, используйте следующие предопределенные методы JavaScript:







Давайте посмотрим, как эти методы работают для определения класса в event.target.



Метод 1: проверьте, имеет ли event.target определенный класс, используя метод contains()

Чтобы определить, принадлежит ли элемент к определенному классу, используйте « содержит() метод « список классов ' объект. Метод contains() используется для определения того, присутствует ли указанный элемент в коллекции. Его выходы» истинный ” если элемент присутствует, в противном случае он дает “ ЛОЖЬ ». Это наиболее эффективный способ определения класса элемента.



Синтаксис





Следуйте приведенному ниже синтаксису, чтобы определить, имеет ли event.target определенный класс или нет, используя метод contains():

мероприятие. цель . список классов . содержит ( 'имя класса' )

В приведенном выше синтаксисе:



  • событие.цель ” — это инициированное событие, которое будет проверено, содержит ли оно конкретный класс или нет.
  • имя класса ” определяет имя класса CSS, который является частью инициированного события.

Возвращаемое значение

Он возвращает « истинный ” если инициированное событие имеет указанный класс; в противном случае он возвращает ' ЛОЖЬ ».

Пример

Сначала создайте три « див ” в HTML-файле с помощью HTML <дел> ярлык:

< див учебный класс знак равно 'центр div div1Style' я бы знак равно 'дел1' > 1

< див учебный класс знак равно 'div div2Style' я бы знак равно 'дел2' > два

< див учебный класс знак равно 'div div3Style' я бы знак равно 'дел3' > 3

див >

див >

див >

Стилизуйте элементы с помощью стилей CSS. Для этого создайте класс CSS « .div ” для всех элементов div:

. див {

набивка : 10 пикселей ;

высота : 100 пикселей ;

ширина : 100 пикселей ;

поле : 10 пикселей ;

}

Создать ' .центр ” класс для установки элементов в центре страницы:

. центр {

поле : авто ;

}

Теперь для стилизации каждый div отдельно создает для них класс CSS. Для первого div установите цвет фона « красный ' в ' div1Стиль ' учебный класс:

. div1Стиль

{

фон - цвет : красный ;

}

Для второго div установите цвет фона « редис розовый ' с использованием ' RGBA(194, 54, 77) 'код в ' div2Стиль ' учебный класс:

. div2Стиль

{

фон - цвет : RGB ( 194 , 54 , 77 ) ;

}

Установите цвет фона» розовый » третьего div, создав « div3Стиль ' учебный класс:

. div3Стиль

{

фон - цвет : розовый ;

}

После запуска приведенного выше HTML-кода вывод будет выглядеть следующим образом:

Теперь в файле JavaScript или « сценарий », используйте приведенный ниже код, чтобы проверить, имеет ли event.target определенный класс или нет:

документ. addEventListener ( 'щелкнуть' , функция handleClick ( мероприятие ) {

где hasClass знак равно мероприятие. цель . список классов . содержит ( 'центр' ) ;

тревога ( 'Этот div содержит класс 'центр':' + hasClass ) ;

} ) ;

В приведенном выше фрагменте кода:

  • Во-первых, прикрепите прослушиватель событий к событию клика, который будет обрабатывать каждый клик в DOM.
  • Затем проверьте, имеет ли инициированное событие класс CSS « центр ” или нет с помощью “ списокклассов.класс() метод.

Выход

Приведенный выше GIF показывает, что div1 содержит « центр 'класс, как он показывает' истинный ', в то время как div2 и div3 отображают ' ЛОЖЬ ' в поле предупреждения, что означает, что они не содержат ' центр ' учебный класс.

Способ 2: проверьте, имеет ли event.target определенный класс, используя метод match()

Другой предопределенный метод JavaScript называется « Спички() ” можно использовать для проверки принадлежности определенного класса элементу или событию. “ имя класса ” — это единственный параметр, необходимый для определения того, включает ли элемент или целевое событие определенный класс или нет.

Синтаксис

Приведенный ниже синтаксис используется для метода match():

мероприятие. цель . Спички ( '.имя-класса' )

В приведенном выше синтаксисе

  • событие.цель ” — это инициированное событие, которое будет проверено, содержит ли оно конкретный класс или нет.
  • имя класса ” указывает имя класса CSS, который является частью инициированного события. Метод match() берет имя класса вместе с точкой (.), которая обозначает слово « учебный класс ».

Возвращаемое значение

Если целевое событие имеет класс, оно возвращает « истинный ' еще, ' ЛОЖЬ » возвращается.

Пример

В файле JavaScript или теге script используйте приведенные ниже строки кода, чтобы проверить, имеет ли event.target определенный класс или нет, используя « Спички() метод:

документ. addEventListener ( 'щелкнуть' , функция handleClick ( мероприятие ) {

где hasClass знак равно мероприятие. цель . Спички ( '.div3Style' ) ;

тревога ( 'Класс этого div соответствует классу div3Style: ' + hasClass ) ;

} ) ;

В приведенных выше строках кода:

  • Во-первых, прикрепите прослушиватель событий к событию клика, который будет обрабатывать каждый клик в DOM.
  • Затем проверьте, соответствует ли « div3Стиль ” Класс CSS существует в инициированном событии с использованием “ Спички() метод.
  • Если он присутствует, alert() показывает сообщение с « истинный ', еще ' ЛОЖЬ ».

Выход

Приведенный выше GIF показывает, что только div3 содержит « div3Стиль 'класс, как он показывает' истинный ».

Вывод

Чтобы определить, имеет ли инициированное событие указанный класс, используйте JavaScript « содержит() 'метод' или ' Спички() метод. Однако метод contains() является одним из наиболее полезных подходов, используемых для определения класса элемента. Оба метода возвращают « истинный 'если инициированное событие имеет класс else' ЛОЖЬ » возвращается. В этом посте объясняются методы определения того, имеет ли event.target определенный класс или не использует JavaScript.