JavaScriptですべてのクラスにクリックイベントを発生させる方法がわかりません。

Question

今回、子孫要素をクリックした場合にも親要素の方でイベントを発生させたいので、

document.addEventListener("click",function(e){
    if (e.target.className == "クラス名") {
        //処理
    }
});

という風にはできません。
また、今回はそのクラスを持っている要素が減ったり増えたりするので、for文でやることもできません。
最終的にはjQueryを使うか、子孫要素からたどっていくしかないと思うのですが、jQueryはなるべく使いたくないので、JavaScriptで完結するとありがたいです。
よろしくお願いします。

追記

サンプルを作ってみました

<div id="elList">
  <div class="parent">
    <div class="child1">
      <div class="child2">
      </div>
    </div>
  </div>
</div>
<button id="append">追加</button>

var elList = document.getElementById("elList");
var append = document.getElementById("append");

append.addEventListener("click", function() {
  elList.innerHTML += `
  <div class="parent">
    <div class="child1">
    	<div class="child2">
    	</div>
    </div>
  </div>`;
});

.parent {
  width: 60px;
  height: 60px;
  margin: 10px;
  background: #f00;
}

.child1 {
  width: 40px;
  height: 40px;
  background: #0f0;
}

.child2 {
  width: 20px;
  height: 20px;
  background: #00f
}

JSFiddle

これで、parentやparentの子孫要素をクリックした時にイベントを発生させたいのですが、
for文でやろうとしても増えたりするのでできません。
addEventListenerのevent.targetで子孫要素まで判定するとできなくはないですが大変です。
なので、jQueryみたいにできる方法はないのでしょうか。

Comments

[kei344]

どういった構造のHTMLでどの要素をクリックしたときにイベントを受け取りたいかを例示してください。

[jun68ykt]

よりよい質問にするために、ご質問の中に「DOMイベントの “キャプチャ” や “バブリング” について理解できているかどうか」が分かるような説明あるいはコードを追記していただけると、回答者にとって、何から説明したらよいかが分かりやすくなると思われます。 （もしも、これらを初めて聞くのであれば https://qiita.com/hosomichi/items/49500fea5fdf43f59c58 などを一読すると、自己解決できるかもしれません）

Answer 1

document.body.addEventListener( 'click', function( e ) {
      console.log( !!e.target.closest( '.parent' ) );
}, false );
```**動くサンプル：**[https://jsfiddle.net/y6pLrgfb/](https://jsfiddle.net/y6pLrgfb/)

---


【Element.closest() - セレクタの条件に合う、最も近い祖先要素を取得する | DOM】
[https://syncer.jp/Web/API_Interface/Reference/IDL/Element/closest/](https://syncer.jp/Web/API_Interface/Reference/IDL/Element/closest/)

【Element.closest() - Web API インターフェイス | MDN】
[https://developer.mozilla.org/ja/docs/Web/API/Element/closest](https://developer.mozilla.org/ja/docs/Web/API/Element/closest)

Comments

[Kosei]

ありがとうございます。
望んでいた結果が見事得られました。

Answer 2

とりあえず以下で実装できました。

var targets = [
  "クラス名1",
  "クラス名2"
];

var isTarget = function(c){
  for(var i = 0;i < c.length;i++){
    if(targets.indexOf(c[i]) != -1) return true;
  }
  return false;
};

document.body.addEventListener("click",function(e){
  if(isTarget(e.target.className.split(" "))){
    // 実行したいイベント処理
  }
},false);

targetsにイベントを実行させたいクラス名を入れていただけると、そのクラスの要素がクリックされた時にイベント処理が行われます。

JSFiddle

私自身は普段はjQueryで済ませてしまっているので、ちょっと自信ないですけど(^ ^;

Comments

[Kosei]

子孫要素をクリックしたときにはイベントが発生しません。
子孫要素にもすべてクラスを指定したらできますけど、大変なので親要素で子孫要素まで監視できるとありがたいです。

document.getElementsByClassName("クラス名").forEach(function(value){
value.addEventListener("click",function(){
//イベント処理
});
});
という風にすると子孫要素まで監視できますが、そのクラスの要素が増えたりするのでその方法が使えません。
何かいい方法はないでしょうか。

[namnium1125]

返信が遅くなりすみません。

そういう意味でしたか(^ ^;

無事解決して何よりです。