Learning jQuery 3 - Fifth Edition

Choosing a delegation scope

Because all of the photo elements we are dealing with are contained inside <div id="gallery">, we have used #gallery as our delegation scope in the previous example. However, any element that is an ancestor of all of the photos could be used as this scope. For example, we could bind our handler to document, which is the common ancestor of everything on the page:

$(() => {  $(document)    .on('mouseenter mouseleave', 'div.photo', (e) => {      const $details = $(e.currentTarget).find('.details');      if (e.type == 'mouseenter') {        $details.fadeTo('fast', 0.7);      } else {        $details.fadeOut('fast');      }    });}); 

Listing 10.7

It can be convenient to attach event handlers directly to document when setting up event delegation. Since all ...