Handling events with the DOM – Part I

Introduction

If you ever have written some JavaScript code to be included in your Web pages, then you’re certainly very familiar with manipulating responses generated by events occurring within the context of a Web document.

In JavaScript parlance, this concept is widely known as event handling. Actually, event handling has been present in the language since its primitive origins, in a valid attempt to programmatically handle most of the user’s actions and window events, triggering specific processes in response to them. By applying these language-native capabilities, we’re able to manipulate form submissions, mouse clicks or page loads, and other common events, adding more interactivity to websites and allowing general control over determined user-generated events. 

Specifically, the DOM (Document Object Model) offers several methods or functions to capture and handle events, providing a straightforward and standard way for doing so. However, there is a flip side. While the W3C (W3 Consortium) have been making a strong effort to establish common DOM standards, browser manufacturers have branched out in different directions, implementing some proprietary DOM constructs, and several glaring incompatibilities. Despite this, there is a lot to be gained from using these abilities. 

In the first part of this article series, we’ll explore the DOM event handling area in its most common aspects, as an introduction for those Web developers wishing to dig a little deeper into this terrain. Finally, a few short disclaimers: this article is not meant to be a complete reference to the DOM event handling. There are many good books out there that thoroughly cover the subject. Also, as new DOM standards are introduced or modified, you should always check http://www.w3.org/TR/2000/CR-DOM-Level-2-20000307/events.html for updated information. 

With the preliminaries out of the way, let’s make our way through the DOM event handling.