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:
onclick
for a button or onload
for the body element).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:
<button onclick="alert(this.innerHTML + ' was clicked.');">Winter</button>
<span onmouseover="this.style.color='blue';">Wellesley College</span>
Wellesley College
<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>
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.
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:
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.
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.