addEventListener で delegate

HTML

<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>

<ul>
 <li><a href="https://teratail.com/questions/79357">JavaScript - ネイティブのJSでデリゲートイベントを実装して子要素の情報を取得したいです(79357)｜teratail</a></li>
</ul>

JavaScript

'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);