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

Question

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

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

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

Event Delegation: can someone explain me this JavaScript code?

javascript

function

event-delegation

dom-events

html

javascript