Unobtrusive JavaScript

Before jQuery and other modern JavaScript libraries, the most common way for implementing event handlers was to use inline declaration. With inline declaration, we could added the event we wanted to handle the HTML elements as attributes. These attributes were named with event name and prefix “on”. As an example to point out differences between inline declaration and unobtrusive JavaScript, suppose we want to do something when user clicks on a button. Earlier developers would have to write code something like shown in below in Figure 1.

Figure 1. Old way to handle the click event in JavaScript

The code in Figure 1 instructs the browser to execute function doSomething() when user clicks the
button. We might be thinking what is wrong with this code. There are few things, actually:

• There is a mixture of HTML code and JavaScript codes which make the code difficult to read.

• We can not reuse the code in doSomething() function on other pages. It can be used only in the same page.

• There is no restriction on the code that defines event handler. The code can quickly
deteriorate to have a full inline implementation of event handler. For example:

<input id="doSomethingButton" type="button" value="Do Something"
onclick="javascript:var x = 5; var y = 3; var z = x * y; alert(z);" />

By using unobtrusive JavaScript with jQuery, we can achieve two main benefits:

• JavaScript code for the event handler is implemented separately from HTML (it can be in a separate file and can be referenced in the page).

• With code and markup separated, we can make the changes to code without affecting the markup and vice versa.

To implement unobtrusive JavaScript with jQuery in code from Figure 1, we need to remove the onclick attribute from button declaration and then we create a new file with name event-handlers.js, to move JavaScript code there (it is not required but it will bring other benefits like better performance of the page. Especially if bundling and minification are used). This is shown in Figure 2. This code is same as code in Figure 1 but now it is implemented using jQuery syntax.

The $(document).ready(function() {}) declaration tells the browser to execute the code inside curly brackets as soon as DOM is ready i.e. after the HTML web page has been fully loaded. After that it binds the click event of the button with id to a function (Please note that the function does not have a name and it is known as anonymous function). The code of this function will be executed whenever user clicks the button.

We have to be careful with selectors. If we make a mistake with selector then jQuery can not find the element we intend to use and the code will not be executed. The anonymous function has same code as doSomething() function in Figure 1.

Figure 2. Contents of event-handlers.js File

The modified definition of the button and script reference is shown in Figure 3 below:

Figure 3. Modified button declaration and external JavaScript reference

What we gained with this changes? First, code readability. The HTML definition of the button is now very clear of any JavaScript code. Next, we have the ability to create a bundle for this file and other JavaScript files. Which means improving the page load time. Finally, the code is centralized that's why when we do the maintenance then changes made to the event handler will be automatically propagated to the element that implements it.