Code Editor
Web Browser
Learn
Mouse Events

currentTarget

Have you noticed in our Sole Shoes website that when you mouse over one photo, all of the images zoom. That's because .product-photo is a class on all the product photos.

One way to solve this issue is to give each HTML element a unique class and to write three mouseenter and mouseleave functions. That, however, would result in a lot of repetitive code. Luckily there's a better way.

The solution is in the callback function and selector we're using when we add a new class. Instead of selecting $('.product-photo') in each callback function, we need to pass event information into the function and call the currentTarget attribute:

$('.example-class').on('mouseenter', event => { $(event.currentTarget).addClass('photo-active'); });

The points below explain some of the features of the event.currentTarget selector in the example above.

  • When a user triggers the mouseenter event listener above, the .on() method generates an event object that we pass into the callback function.
  • Inside the callback function, we select event.currentTarget. The currentTarget attribute refers to only the .example-class element that the learner has moused over.
  • Since $(event.currentTarget) refers to the element that an event is detected on, you will only use it inside a callback function.

In our Sole Shoes website, we will use $(event.currentTarget) to target the one image a user mouses over.

Report a Bug
If you see a bug or any other issue with this page, please report it here.