事件委托：有人可以解释一下这段 JavaScript 代码吗？

Question

我正在研究一本书上的事件委托，但我不确定我是否完全理解了这个概念。我知道它用于将事件“附加”到父元素，而不是将其附加到所有子元素。但我想如果没有很好的解释，我将无法自己使用它。

function getTarget(e) {
  if(!e) {
    e = window.event;
  }
  return e.target || e.srcEvent;
}

function itemDone(e) {
  var item, elParent, elGrandparent;
  item = getTarget(e);
  elParent = item.parentNode;
  elGrandparent = item.parentNode.parentNode;
  elGrandparent.removeChild(elParent);

  if (e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

var el = document.getElementById("shoppingList");
if (el.addEventListener) {
  el.addEventListener("click", function(e) {
    itemDone(e);
  }, false);
} else {
  el.attachEvent("onclick", function(e) {
    itemDone(e);
  });
}

<ul id="shoppingList">
  <li class="complete"><a href="itemDone.php?id=1">fresh figs</a></li>
  <li class="complete"><a href="itemDone.php?id=2">pine nuts</a></li>
  <li class="complete"><a href="itemDone.php?id=3">honey</a></li>
  <li class="complete"><a href="itemDone.php?id=4">balsamic vine</a></li>
</ul>

Answer 1

如果您将事件附加到父元素，然后单击子元素，如果子元素附加了将触发的单击事件，则 javaScript 也将沿着一系列排序并触发附加到父元素的事件除非你阻止这种情况发生。

html

<div id="parent">
    <div>child 1</div>
    <div>child 2</div>
    <div>child 3</div>
</div>

javascript

document.getElementById('parent').addEventListener('click', function(e){

    console.log(e.target.innerHTML);

});

jsfiddle

在我的示例中，被点击的子元素的 innerHTML 被记录到控制台。