Mastering JavaScript

Chapter 8
Working with browser events
When are you developing for browsers, you will have to deal with user interactions
and events associated to them, for example, text typed in the textbox, scrolling of the
page, mouse button press, and others. When the user does something on the page,
an event takes place. Some events are not triggered by user interaction, for example,
load event does not require a user input.
When you are dealing with mouse or keyboard events in the browser, you can't
predict when and in which order these events will occur. You will have to constantly
look for a key press or mouse move to happen. It's like running an endless
background loop listening to some key or mouse event to happen. In traditional
programming, this was known as polling. There were many variations of these
where the waiting thread used to be optimized using queues; however, polling is still
not a great idea in general.
Browsers provide a much better alternative to polling. Browsers provide you with
programmatic means to react when an event occurs. These hooks are generally called
listeners. You can register a listener that reacts to a particular event and executes an
associated callback function when the event is triggered. Consider this example:
addEventListener("click", function() {
...
});
The addEventListener function registers its second argument as a callback function.
This callback is executed when the event specified in the first argument is triggered.
What we saw just now was a generic listener for the click event. Similarly, every
DOM element has its own addEventListener method, which allows you to listen
specifically on this element:
Submit
No handler here.
var button = document.getElementById("#Bigbutton");
button.addEventListener("click", function() {
console.log("Button clicked.");
});
[ 193 ]
www.it-ebooks.info