Recall that to implement
event delegation by hand, we check the
target property of the
event object to see if it matches the element that we want to trigger the behavior. The event target represents the innermost, or most deeply nested, element that is receiving the event. With our sample HTML this time, however, we're presented with a new challenge. The
<div class="photo"> elements are unlikely to be the event target since they contain other elements, such as the image itself and the image details.
What we need is the
.closest() method, which works its way up the DOM from parent to parent until it finds an
element that matches a given selector expression. If no elements are found, it acts like any other DOM traversal method, ...