Optimise jQuery image gallery

Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2015/05/optimise-jquery-image-gallery.html

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1

In this video we will discuss how to optimise the image gallery we created in Part 43, using the concept of event bubbling. We will also enhance the example, using a dropdownlist for effects and duration. We will also be able to enlarge and shrink the height and width of the main image. Please watch Part 43 from jQuery tutorial before proceeding.

The problem with the image gallery that we created in Part 43 is that we are binding event handlers (mouseover, mouseout & click) to every image element. This means if you have 500 image elements, then there will be 1500 event handlers (mouseover, mouseout & click) in the memory and this may negatively affect the performance of your application.

A better way of doing the same from a performance standpoint is shown below. In this example, the event handlers are attached to the div element and not to the individual img elements. So, even if you have 500 img elements, there are only 3 event handlers in memory.

So how does this work
1. When you click on an img element, the event gets bubbled up to its parent (div) as the img element does not have an event handler
2. The bubbled event is handled by the the parent (div) element, as it has a click event handler.