addEventListenerでeventオブジェクトを利用して、クリックしたHTML要素のタグの種類で条件判定をしたい

前提・実現したいこと

addEventListenerでeventオブジェクトを利用して、クリックしたHTML要素のタグの種類で条件判定をできるようにしたいのですが、可能でしょうか？liタグで６個くらいリストを作って、そのリストをクリックしたら発火というイベントを考えているのですが、タグ名での判定ができず、それぞれにclassを設定して、classList.containsなら上手く行くのですが、どうも冗長な気がして、できればスッキリさせたいです。アドバイスいただけますと助かります。

該当のソースコード

Html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>Practice</title>
6    <link rel="stylesheet" href="css/styles.css">
7  </head>
8  <body>
9
10    <div class="aaa">
11      aaa
12    </div>
13    <p class="bbb">bbb</p>
14    <script src="js/main.js"></script>
15  </body>
16</html>
17

css
1.aaa {
2  width: 100px;
3  height: 100px;
4  background: blue;
5}
6
7.bbb {
8  width: 100px;
9  height: 100px;
10  background: red;
11}
12

JavaScript
1'use strict';
2{
3  const aaa = document.getElementById('aaa');
4  const bbb = document.getElementById('bbb');
5  const p = document.getElementsByTagName('p');
6
7  document.addEventListener('click', e => {
8    if (e.target.tagName === p) {
9      console.log('Yes');
10    }
11  });
12
13}

補足情報（FW/ツールのバージョンなど）

Atom
Chromeバージョン: 75.0.3770.100

行動規範の内容に同意します

回答2件

ベストアンサー

JavaScrupt
1 if (e.target.tagName === p) {

tagName はString型です。
https://developer.mozilla.org/ja/docs/Web/API/Element/tagName
=== は型と値を一致させて、trueとなります。

両値に typeof 演算子で調べる
両値を console.log で出力する

等して、確認する事をお勧めします。

Re: YESYUKI17 さん

投稿2019/07/31 14:46

編集2019/07/31 14:48

think49

総合スコア18162

YESYUKI17

2019/08/03 03:48

型と値の一致が必要なんですね。理解できました！ありがとうございます！

YESYUKI17

2019/08/03 03:48

型と値が一致する必要があること理解できました！ありがとうございます

行動規範の内容に同意します

tagNameはすべて大文字で文字列が返ってきますのでそれさえ気をつければいけます
またそれぞれのタグには要素の種類がきまっていますのでinstanceofでジャッジできます
(どっちかといえばtagNameの方が楽ですね)

javascript
1<style>
2.aaa {
3  width: 100px;
4  height: 100px;
5  background: blue;
6}
7
8.bbb {
9  width: 100px;
10  height: 100px;
11  background: red;
12}
13.ccc {
14display:inline-block;
15background: yellow;
16}
17</style>
18<script>
19document.addEventListener('click',e=>{
20  console.log(e.target.tagName);
21  if(e.target instanceof HTMLParagraphElement) {
22    console.log("自分がP");
23  }else if(e.target.closest('p')){
24    console.log("親がP");
25  }else{
26    console.log("Pじゃない");
27  }
28},true);
29</script>
30
31<div class="aaa">
32aaa
33<span class="ccc">ccc</span>
34</div>
35<p class="bbb">bbb
36<span class="ccc">ccc</span>
37</p>