Welcome to the fifth Easy jQuery Tutorial, part of EasyProgramming.net. In this tutorial, we'll learn about Event delegation with the .on() event method in jQuery.

What is event delegation? It refers to the process of Event Propagataion (bubbling) to handle events at a higher level than where the event originated. It's great because it allows you to create just one single event listener for all elements that exist now or will be created in the future. For more information, check out the Event Delegation explantion on the jQuery website.

The .on() event method looks something like the following:

$(selector).on('event', 'delegate', 'data', callback);

In the above example, the item marked as 'delegate' will trigger an event and be bubbled up to whatever parent you've selected as the $(selector). The 'data' argument is just custom data that you can pass into the event. You don't normally see this used but we'll use it just to show you what it looks like.

Event Delegation is a powerful tool in your arsenal. I would recommend that you practice with this and learn all the ways event delegation can help you make your code more effective and far more efficient!

I hope you enjoyed this tutorial! Please feel free to ask questions below or just leave your basic comments. 

To fork the fiddle and follow along: https://jsfiddle.net/easyjs/jsksfgrj/

Remember to checkout the Resources section below for associated downloadable content, JSFiddle links, and other resources. Watch the video and follow along!