Review of what we know

During the semester we have talked about events and event attributes, as well as event handlers. In fact, you have already written a few event handlers in lab.

Here is a summary of the terminology we have been using:

• event - an action performed by the user or the browser (e.g., user clicks the mouse or browser loads the page)
• event attribute - an HTML attribute for elements that are the targets of events (e.g. onclick for a button or onload for the body element).
• event triggering (or event firing) - a notification that an event has occurred.
• event handler - some Javascript code (usually a function) that will be executed to handle the response to the event.
• this - a special variable that is used within an event handler to refer to the target element for the event.

Additionally we have seen two ways in which event handlers can be associated with the event attributes:

1. Inline event handlers: Javascript code directly added to the HTML element.

   <button onclick="alert(this.innerHTML + ' was clicked.');">Winter</button>
   

   
   

   Winter

   <span onmouseover="this.style.color='blue';">Wellesley College</span>
   

   Wellesley College

2. Event handler functions - a function invocation as an attribute value.

   <script>
   function greetings(){
       var inputField = document.querySelector("[name='firstName']");
       var name = inputField.value // read value from input 
       alert("Nice to meet you, " + name);
   }
   </script>
   <p><input name="firstName"></p>
   <button onclick="greetings();">Greet me!</button>
   

   
   

   Greet me!

The inline event handlers should be used only when there is one or two lines of Javascript code to execute and this code is unique to that element.

Assigning functions to HTML attributes is a common way to perform event handling and we have been using it both in assignments and labs. The problem with this technique is that it doesn't scale well and also it makes hard to develop/maintain the HTML and Javascript files separately. Imagine that you have to add a click event attribute to all menu items in this page. This makes the code ugly and difficult to maintain. Therefore, today we will show another way to do this with Javascript event binding.

You have already seen this, so this section is more of a reminder than an introduction.

Event Binding

Javascript event binding is the process of attaching an event handler to an HTML element. This is done in the Javascript file (or within the <script> environment), as opposed to the static binding through the HTML attribute. Its advantages are:

• It's good for modularity, since it keeps HTML and Javascript completely separate.
• It allows to unbind event handlers during the application life, or add additional event handlers only when needed.

Below are some examples of event binding that are used in some of our applications:

// Examples 1-3 are in the Implicit Bookmarking application
window.onload = onDocumentReady; // 1

window.onunload = onLeavingPage; // 2

var aside = document.querySelector("aside"); // 3
aside.onclick = processAsideClick;


/* This code is from the Selected Menu Item application. It shows
how to bind the same event handler to many elements at once.
*/

// select all items to which we want to bind the event handler
var allItems = document.querySelectorAll("nav div"); // is an array

// iterate through these items to perform the binding
for (var i=0; i < allItems.length; i++) {
  var item = allItems[i];
  item.onclick = doWhenClicked;
}

The syntax for event binding is the following:

aDOMObject.eventAttribute = functionName;

Never use parentheses after the function name in this occasion, since that would be interpreted as function invocation, not event binding.

The function definition for all these function names can be somewhere else in the file, either before or after the event binding statements. There is no explicit function invocation for event handlers (as we do for normal functions). They will be invoked automatically when the event is triggered.

Anonymous Functions

When looking up examples in the web (or your books), you will often come across examples of event binding that look like the one below:

window.onload = function() {
  // here some statements;
}

Notice that the function keyword in this case is not followed by the function name. Such a function is called an anonymous function, since there is no way for us to refer to it by name somewhere else in the program. This is also a more compact way to implement event binding, since it is done in one single step. For the moment you can ignore this syntax, but we will encounter it very soon, when we will discuss the Javascript library jQuery, which makes heavy use of anonymous functions, especially in the occasions when a particular kind of function is needed, a callback function.