ネイティブのJSでデリゲートイベントを実装して子要素の情報を取得したいです

Question

###前提・実現したいこと
現在、jQueryで書かれたコードをネイティブのJSに変換をしています。
その中でonイベントを使ってデリゲート処理を行っている箇所があり、
ネイティブのJSでどのように書いて再現すればよいのかわからず質問させていただきました。

実現したいことは下記です。

• 下記の#wrapを起点にイベントを監視（.itemは動的に増える可能性があるため）
• #wrapの子要素をクリックすると、その.itemを起点にして任意の子要素の情報を取得。

（item1テキストをクリックしたら、spanタグのid（この場合id1）、aタグのhref属性値（この場合1.html）を取得。

• 取得した情報をajaxで送信（これは別件なので本質問の対象外です）

jqueryで書かれているのは下記です。

$("#wrap").on('click','.item',function(event) {
  event.preventDefault();
  event.stopPropagation();

  // idを取得
  var id = $(this).find(".child").attr("id");
  // hrefを取得
  var href = $(this).find("a").attr("href");

  console.log(id, href);
});

###発生している問題
#wrapをクリックするとイベントターゲットがa要素まで行ってしまい、.itemを起点にすることできません。
どうやればシンプルに実装できるでしょうか。

###該当のソースコード

<div id="wrap">
  <div class="item">
    <span class="child" id="id1"><a href="1.html">item1</a></span>
  </div>
  <div class="item">
    <span class="child" id="id2"><a href="2.html">item2</a></span>
  </div>
  <div class="item">
   <span class="child" id="id3"> <a href="3.html">item3</a></span>
  </div>
  <div class="item">
    <span class="child" id="id4"><a href="4.html">item4</a></span>
  </div>
  <div class="item">
    <span class="child" id="id5"><a href="5.html">item5</a></span>
  </div>
</div>

<button id="btn">add</button>

const wrap = document.getElementById('wrap');

wrap.addEventListener('click', function(e) {
  e.preventDefault();
  console.log(e.target); // -> <a href="1.html">item1</a>
 /*
  ここをなんとかしたい
  */
}, false);


// addボタンのイベント登録
const btn = document.getElementById('btn');
let num = 6;
btn.addEventListener('click', function() {
  const item = document.createElement('div');
  item.innerHTML = `<span class="child" id="id${num}"><a href="${num}.html">item${num}</a></span>`;
  item.classList.add('item');
  num++;
  wrap.appendChild(item);
});

お力添えいただけると幸いです。何卒よろしくお願いいたします。

Answer 1

event.target.id === 'wrap' の時だけ処理をスキップさせて下さい。

• addEventListener で delegate - JSFiddle

<div id="wrap">
  <div class="item">
    <span class="child" id="id1"><a href="1.html">item1</a></span>
  </div>
  <div class="item">
    <span class="child" id="id2"><a href="2.html">item2</a></span>
  </div>
  <div class="item">
   <span class="child" id="id3"><a href="3.html">item3</a></span>
  </div>
  <div class="item">
    <span class="child" id="id4"><a href="4.html">item4</a></span>
  </div>
  <div class="item">
    <span class="child" id="id5"><a href="5.html">item5</a></span>
  </div>
</div>

<button id="btn">add</button>

<script>
'use strict';
document.getElementById('wrap').addEventListener('click', function handleClick (event) {
  var item = event.target, currentTarget = event.currentTarget;

  if (item === currentTarget) {
    return;
  }

  while (item && !item.classList.contains('item')) {
    item = item.parentNode
  }

  var child = item.firstElementChild,
      id = child.id,
      href = child.firstChild.href; // 絶対URIがNGなら getAttribute()

  console.log(id, href);
  event.preventDefault();
}, false);
</script>

Re: kde さん

Comments

[kde]

早々にありがとうございます！
event.currentTargetの存在、whileでの祖先要素への移動、これらを知ることができ大変勉強になりました。このコードであればitem内に要素が増えても自分が理想とする形での情報取得が行えると感じました。
本当にありがとうございます。

Answer 2

closest()があります。IE が必要なら Polyfill もどうぞ。
https://developer.mozilla.org/ja/docs/Web/API/Element/closest

e.target.closest('.item'); // Element or null.

Comments

[kde]

早々にありがとうございます！closest()メソッドの存在知りませんでした。非常に便利そうなのでじっくり見させていただきます。

Answer 3

掴んでからどうしたいのかによりますが、こんな感じでどうでしょうか？

window.onload=function(){
  n2a(document.querySelectorAll('#wrap .item')).forEach(function(i){
    i.addEventListener('click',function(e){
      var t=e.target;
      console.log(t);
      e.preventDefault();
    });
  });
}
function n2a(node){
  if(!NodeList.prototype.forEach){
    node = Array.prototype.slice.call(node,0); 
  }
  return node;
}

Comments

[namimon]

querySelectorAllは死んだnodeなので、追加した要素には効かないのではないでしょうか

[kde]

早々にありがとうございます！少ないコードで実装でき素晴らしいと思いました！
addボタンをクリックして動的に.itemを生成して増やしたときに再度イベントを定義する必要がありそうでしたが、大変参考になりました。ありがとうございます。