В этом посте будут объяснены методы определения того, имеет ли 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.