Event delegation

Recall that in order to implement event delegation, 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 are presented with a new challenge. The <div class="photo"> elements are unlikely to be the event target as they contain other elements, such as the image itself and the image details. In order to find this <div> from an element it contains, we can use 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, then it acts like any other DOM traversal method, returning a new "empty" jQuery object, as follows:

// Unfinished code
$(document).ready(function() {
  $('#gallery').bind('mouseover mouseout', function(event) {
    var $target = $...