I created a five minute tutorial on how to do Event Driven Programming with jQuery.
Please enable Javascript and Flash to view this Blip.tv video.Covered in this tutorial is the usage of:
- $.bind(…)
- $.live(…)
- $.trigger(…)
These three methods make up the core of jQuery’s event handling and by using them right you can do some very powerful things that a procedural programming model would have a hard time doing.
A bit about Event Driven Programming
Maybe the best way to describe EDP is to compare it to traditional programming. With more traditional programming the computer processes instructions one at a time. It will do step 1, wait for that operation to finish before moving on to the next step.
In modern graphical user interfaces (like your browser) the traditional model would be very frustrating. Waiting sucks. That is why GUIs are asynchronous programming environments.
Asynchona-what? In a nutshell it means that multiple things can happen at the same time without depending on the other one to finish first. For example when you click a button on a web page the browser can load some data in the background while you’re clicking around and doing other things. Much better.
The reason EDP is much more suitable is because you can create a bunch of things that just waits and listens for a specific event before doing anything. You save the work of having to synchronize your instructions and do everything before hand.
If you’re a server side programmer like me this is probably a very big change in thinking. However, as you can see from the attached demo based on the video it takes very little code to do some pretty awesome things.
Here is the demo: Demo of Event Driven Programming with jQuery. With a bit more added functionality for extra goodness.
{ 7 comments… read them below or add one }
Cool.
Which program you used to record this tutorial?
I used a livescribe pen to do the audio/writing recording. Then I used a screen capture tool call ishowuHD for the Mac to do the recording to mov. Then imovie to convert.
Kind of a hack but results are pretty good.
Thanks for the posting the tutorial. I was looking for a simple explanation of JQuery custom event generation. I enjoy the handwriting in the video. It’s unique and creative.
Very nice, thanks for this tutorial, I started using jQuery for simple effects while using flash for this kind of programming, but I guess it’s time to abandon flash :)
great post, thanks for this, I can use this for my upcoming site.
another great jQuery tutorials
jQuery Duplicate Fields Form Submit with PHP
Is the player of your video also a jquery? cool. :)
Love this tutorial..
Thank you for Sharing!