Event driven programming with jQuery – (part 1). What is event driven?

What is event driven?

Actually the real power of JavaScript libraries and in particular in jQuery is the usage of custom events. There you have the full power to implement what is called event driven programming. This of course is not a must. You can simply make a small js application with no usage of custom events at all. The problem is that in large scale js applications the development becomes really hard and difficult to maintain.

In fact all the major JavaScript libraries come with built in mechanisms to develop apps with custom events. And if you plan to make very large website, i.e. entirely on AJAX, whatever js library you use, you better start with making your app event driven.

That in very breve means that the different modules of the page must interact between themselves only by firing and listening for events. So you can fully change your page layout with no need to rewrite the code again and again.

What is a module?

Well this is kind of difficult to decide. But however you must do this segmentation in the beginning of the project, and I’ll cover it later in this series.

“Native” events in JavaScript / jQuery

Just to start from somewhere, let’s say that almost every JS programmer is a bit familiar with event driven programming, because of the native events, such as “onclick”, “onmouseover” etc. However this is not enough in a large scale app and I’ll demonstrate within a simple app how to implement the basics of the event driven model.

Related posts:

  1. Event driven programming with jQuery – (part 4). Simple event driven app.
  2. Event driven programming with jQuery – (part 2). Events in jQuery.
  3. Event driven programming with jQuery – (part 3). What is a module?
This entry was posted in javascript, micro tutorial and tagged , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">