事件委托，Event.target与Event.currentTarget

Question

在MDN Event.target reference中有一个关于实现事件委派的示例：

事件委托示例

// Assuming there is a 'list' variable containing an instance of an  
// HTML ul element.
function hide(e) {
    // Unless list items are separated by a margin, e.target should be  
    // different than e.currentTarget
    e.target.style.visibility = 'hidden';
}

list.addEventListener('click', hide, false);

// If some element (<li> element or a link within an <li> element for  
// instance) is clicked, it will disappear.
// It only requires a single listener to do that

示例中不清楚部分

在这个例子中我不明白的是这个评论：

// Unless list items are separated by a margin, e.target should be  
// different than e.currentTarget

问题

<li>元素的保证金如何在Event.target和Event.currentTarget之间产生差异？

Answer 1

请注意event.target中所述的event.currentTarget与ul不同的原因：

我认为重点是，如果没有边距，那么直接点击li就不可能，因为ul元素将完全填满其空间。

如果 是一个保证金，那么它至少可以可能点击event.target，在这种情况下event.currentTarget和function hide(e) { document.querySelector("pre").textContent += 'e.target = ' + e.target.nodeName + ", e.currentTarget = " + e.currentTarget.nodeName + "\n"; } document.querySelector("#list").addEventListener('click', hide, false);将是相同的。

＆＃13;

＆＃13;

ul {
  border: 2px solid orange;
}
li {
  padding: 10px;
  color: blue;
  margin: 30px;
  border: 1px dashed blue;
}

＆＃13;

<pre></pre>
<ul id="list">
  <li>click me
  <li>click me
  <li>click me
</ul>

＆＃13;

override func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
    return image[indexPath.row].size.height
} 

＆＃13;

＆＃13;

＆＃13;