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, returning a new empty jQuery object. We can use .closest() to find <div class="photo"> from any element it contains, as follows:

$(() => { 
  $('#gallery')
    .on('mouseover mouseout', (e) => {
      const $target = $(e.target)
  ...