JavaScript を使用して event.target に特定のクラスがあるかどうかを確認する

CSS スタイルを使用して要素のスタイルを設定します。そのためには、CSS クラスを作成します。 .div 」すべての div 要素に対して:

「 。中心 」 ページの中央に要素を設定するためのクラス:

ここで、スタイリングのために、すべての div が個別に CSS クラスを作成します。最初の div では、背景色を設定します。 赤 ' の中に ' div1スタイル ' クラス：

2 番目の div では、背景色を設定します。 大根ピンク 」を使用して rgba(194, 54, 77) 」内のコード div2スタイル ' クラス：

背景色を設定する」 ピンク 」を作成して 3 番目の div の「 div3スタイル ' クラス：

上記の HTML コードを実行すると、出力は次のようになります。

ここで、JavaScript ファイルまたは「 脚本 」タグで、以下のコードを使用して、event.target に特定のクラスがあるかどうかを確認します。

上記のコード スニペットでは、次のようになります。

• まず、DOM でのすべてのクリックを処理するクリック イベントにイベント リスナーをアタッチします。
• 次に、トリガーされたイベントに CSS クラス「 中心 」の助けを借りて、またはそうではありません classList.class() ' 方法。

出力

上の GIF は、div1 に「 中心 「それが示すクラス」 真実 」、一方、div2 と div3 は「 間違い 」がアラート ボックスに表示されます。つまり、「 中心 ' クラス。

方法 2: match() メソッドを使用して、event.target に特定のクラスがあるかどうかを確認します。

「」と呼ばれる別の JavaScript 定義済みメソッド マッチ() 」を使用して、特定のクラスが要素またはイベントに属しているかどうかを確認できます。 「 クラス名 」は、要素またはターゲット イベントに特定のクラスが含まれているかどうかを判断するために必要な唯一のパラメーターです。

構文

以下に示す構文は、matches() メソッドに使用されます。

上記の構文では、

• 「 イベント.ターゲット 」は、特定のクラスが含まれているかどうかをチェックするトリガー イベントです。
• 「 クラス名 」は、トリガーされたイベントの一部である CSS クラスの名前を示します。 matches() メソッドは、クラスの名前と単語を表すドット (.) を一緒に受け取ります。 クラス 」。

戻り値

対象のイベントにクラスがある場合、「 真実 ' そうしないと、 ' 間違い 」が返ってきます。

例

JavaScript ファイルまたはスクリプト タグで、以下のコード行を使用して、event.target に特定のクラスがあるかどうかを「 マッチ() ' 方法：

上記のコード行では:

• まず、DOM でのすべてのクリックを処理するクリック イベントにイベント リスナーをアタッチします。
• 次に、「 div3スタイル 」 CSS クラスは、「 マッチ() ' 方法。
• 存在する場合、alert() は「 真実 '、 そうしないと ' 間違い 」。

出力

上記の GIF は、div3 のみに「 div3スタイル 「それが示すクラス」 真実 」。

結論

トリガーされたイベントに指定されたクラスがあるかどうかを判断するには、JavaScript の「 含む() 」メソッドまたは「 マッチ() ' 方法。ただし、contains() メソッドは、要素のクラスを決定するために使用される最も有用なアプローチの 1 つです。どちらのメソッドも「 真実 ' トリガーされたイベントにクラス else がある場合 ' 間違い 」が返ってきます。この投稿では、JavaScript を使用して event.target が特定のクラスを持っているかどうかを判断する方法について説明しました。