jQueryの$(document).on('click', 'セレクタ', function(){〜});を生JS（Vanilla JS）で書きたい

はじめまして、ARCHETYPの副社長テクニカルディレクターの神谷です。

プロジェクトでがっつりコードを書くことがめっきり減ってしまいまして、アウトプットする場所がなくなってしまったので、ちょっとしたTips系の記事などを気の向くまま書いていきたいと思います。

今回はjQueryを使っていたところを生JSに変更していく時のコードを書いてみました。
まずは動的に追加される要素にも対応可能にするイベントハンドリングの例です。

サンプルとしてアコーディオンUIで考えてみたいと思います。
タイトル部分をクリックすると中身の表示非表示を切り替えるサンプルです。

##HTML
ここは非常にシンプルに、タイトル（.title）とコンテンツ（.panel）が存在している状態。

<div id="wrap">
  <div class="item">
    <div class="title"><p>title</p></div>
    <div class="panel">
      <p>aaaaaa<br>bbbbb<br>ccccc</p>
    </div>
  </div>
  <div class="item">
    <div class="title"><p>title</p></div>
    <div class="panel show">
      <p>aaaaaa<br>bbbbb<br>ccccc</p>
    </div>
  </div>
</div>

##JavaScript

document.addEventListener('click', (event) => {
  let title = event.target.closest('.title'); //子要素も含めて取得
  if( title ) {
    let item = title.closest('.item');
    let panel = item.querySelector('.panel');
    panel.classList.toggle('show');
  }
});

1. documentにイベントを設定
2. event.target を参照して要素がクリックされたかを判別
3. ifで要素の存在有無を判定
4. ifの中は実際の処理。今回はコンテンツ（.panel）にクラスをトグルで制御しています。やりたい処理に応じて書き換えます。

2でclosest で絞り込んでいるのは、特定の要素（今回だと .title ）の子要素（p）をクリックすると、event.target が p になってしまうのでclosestで自身も含めた親要素を捜査しています。

サンプル

最後にサンプルを以下に置いておきますね。

See the Pen Untitled by kamipoo (@kamipoo) on CodePen.

書き方だけでいったらjQuery使った方が断然シンプルではあります。
便利に使うなら独自でヘルパー関数作るとかした方が良さそうですね。

ARCHETYPではShopifyテーマ、Shopifyアプリ、Webサイト/サービスなどの開発を行うエンジニアを募集中です！
正社員、副業などとわず募集です！（フルリモートも相談可です！）
https://www.archetyp.jp/recruit/
気になる方はお気軽にエントリーお待ちしております！