In the MDN Event.target reference, there is an example provided regarding event delegation:
Example of Event Delegation
// 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
Confusing Part of the Example
What I find unclear in this example is the following comment:
// Unless list items are separated by a margin, e.target should be
// different than e.currentTarget
Question
How can having a margin on <li> elements affect the difference between Event.target and Event.currentTarget?