Event handlers and jQuery

Congratulations, you have reached a major milestone in the book. This page introduces a few new concepts all at once and you are going to use a lot of them daily. Let's assume that you are building a website with a menu. The menu is built using an ordered list, and here is the code for one menu item:

<li id="intnews"><a href="oldsite/intnews.php" class="news">International</a></li>

In your custom JavaScript file, you have:

$("#mainmenu").on("click", "a.news", function(e){

e.preventDefault();

var nav = $(this).parent().attr("id");

updateNewsContent(nav);

});

Let's first discuss the .on() part. This is the jQuery way of performing event handling. An event occurs when the visitor of your site performs a certain action. A typical action is the click of a mouse on a button or a link. We can then catch that event and perform certain tasks inside the function that is our event handler. In the previous example, we perform them all in a function...