事件委托经典题

69 阅读1分钟

现有以下HTML, 请监听item的点击事件,并满足以下要求:

  1. 使用alert显示item的内容
  2. 动态添加新的item依旧有效
  3. itemx的click事件不能被触发
<div id="container">
  <div id="itemx" class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

解题

const dom = document.getElementById('container'),
    list = dom.getElementsByClassName('item'),
    btn = document.getElementById('btn');
  dom.onclick = function (e) {
    const { id, innerHTML, className } = e.target;
    if (!id && className === 'item') {
      alert(innerHTML);
    }
  };
  btn.onclick = function () {
    let html = document.createElement('div'),
      len = list.length;
    html.className = 'item';
    html.innerHTML = parseInt(list[len - 1].innerHTML) + 1;
    dom.appendChild(html);
  };