javascript - 事件委托(delegate): can someone explain me this JavaScript code?

Question

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

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 被记录到控制台。