活动代表团：有人能解释一下这个JavaScript代码吗？

Question

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

HTML：

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

JavaScript的：

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

Answer 1

如果您将一个事件附加到父元素，并单击子元素，如果子元素附加了一个将触发的click事件，则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

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