Проверете дали event.target има конкретен клас с помощта на JavaScript

Оформете елементите с помощта на CSS стил. За да направите това, създайте CSS клас ' .div ” за всички елементи div:

Създавам ' .център ” клас за настройка на елементите в центъра на страницата:

Сега, за стилизиране, всеки div поотделно създава CSS клас за тях. За първия div задайте цвета на фона „ червен ' в ' div1Style ” клас:

За втория div задайте цвета на фона „ репички розови ' използвайки ' rgba(194, 54, 77) ” код в „ div2Style ” клас:

Задайте цвета на фона ' розово ” на третия div чрез създаване на „ div3Style ” клас:

След стартиране на горния HTML код изходът ще изглежда така:

Сега, в JavaScript файл или „ сценарий ”, използвайте предоставения по-долу код, за да проверите дали event.target има конкретен клас или не:

В горния кодов фрагмент:

• Първо, прикачете слушател на събития към събитие за кликване, което ще обработва всяко кликване върху DOM.
• След това проверете дали задействаното събитие има CSS клас „ център ” или не с помощта на „ classList.class() ” метод.

Изход

Горният GIF показва, че div1 съдържа „ център „клас, както показва“ вярно “, докато div2 и div3 показват „ невярно “ в полето за предупреждение, което означава, че не съдържат „ център ” клас.

Метод 2: Проверете дали event.target има конкретен клас, като използвате метода matches().

Друг предварително дефиниран метод на JavaScript, наречен „ съвпада() ” може да се използва за проверка дали определен клас принадлежи към елемент или събитие. „ име на клас ” е единственият параметър, необходим за определяне дали даден елемент или целево събитие включва определен клас или не.

Синтаксис

Даденият по-долу синтаксис се използва за метода matches():

В горния синтаксис,

• “ event.target ” е задействано събитие, което ще бъде проверено дали съдържа конкретния клас или не.
• „ име на клас ” показва името на CSS класа, който е част от задействаното събитие. Методът matches() взема името на класа заедно с точка (.), която обозначава думата „ клас ”.

Върната стойност

Ако целевото събитие има клас, то връща „ вярно 'друго', невярно ” се връща.

Пример

В JavaScript файл или маркер на скрипт използвайте редовете от код по-долу, за да проверите дали event.target има конкретен клас или не, като използвате „ съвпада() ” метод:

В горните редове код:

• Първо, прикачете слушател на събития към събитие за кликване, което ще обработва всяко кликване върху DOM.
• След това проверете дали „ div3Style ” CSS клас съществува в задействано събитие с помощта на „ съвпада() ” метод.
• Ако е налице, alert() показва съобщение с „ вярно “, иначе “ невярно ”.

Изход

Горният GIF показва, че само div3 съдържа „ div3Style „клас, както показва“ вярно ”.

Заключение

За да определите дали дадено задействано събитие има определен клас, използвайте JavaScript „ съдържа() ” метод или „ съвпада() ” метод. Въпреки това, методът contains() е един от най-полезните подходи, използвани за определяне на класа на елемент. И двата метода връщат ' вярно ' ако задействаното събитие има клас else ' невярно ” се връща. Тази публикация обяснява методите за определяне дали event.target има конкретен клас или не с помощта на JavaScript.