JavaScript and Events

DOM Event Registration


An event represents actions in the browser or user actions such as moving the mouse or a click on a button.

One of the common uses of JavaScript Events is to check for valid input at the client side. It avoids sending bad data to the server, rsulting in less network trafic. On top of this, it detects incorrect form data on the client side which provides quicker response to the users.

Event Handler

An event handler is a program script designed to execute when a certain event happens. One of the most common uses of event handlers is to check for simple errors before sending incorrect data to the server.

Here is a list of events and their tag attributes:

Event Registration

Event Registration links an event and the event handler together. There are two approaches for registration.

When registering event handlers, in DOM event model, the name of the handler function can be assigned to the property associated with the event, as the following example:

document.getElementById("custName").onchange = chkName;

The following example demostrates the use of DOM model. It is taken from Robert W. Sebesta, Programming the World Wide Web (Eighth Edition).

The program checks input for two text boxes. If either or both input are in the wrong format, alert messages are generated for the user to fix the input. Three files are included:

DOM2 Event Registration

Our example of the DOM 2 event model is very basic. The more complicated and detailed DOM 2 event models can be found at The W3C Web site.

The event handler connection for the DOM 2 event model is much more complicated. It adds a more sophisticated and powerful method for event handling. It separates the HTML events from both the mouse events and HTML events.

When an event occurs, an event object is created at some node in the document tree. The node is called target node.

There are three phases for handling events:

1. Capturing phase

2. Target mode phase

3. Bubbling phase

Details are explained in the class lecture.

When registering event handlers in DOM 2 event model, it is performed by the method addEventListener. It takes three parameter. The first is the name of the event as a string literal. The second is the event handler function. The third is a boolean value (optional) that specifies whether the handler is enabled for calling during the captureing phrase.

More examples on addeventListener at w3school addeventListener

When a handler is called, it is passed a single parameter, the event object. For example, suppose we want to register the event handler chkName on the text input element whose id is custName for the change event. The following call accomplishs this task:

doucument.getElementById("custName").addEventListener("change", chkName, false);

In DOM event model, when an event handler is registerd to a node, the handler becomes a method of the object that represent the node. It uses this in the handler as reference to the target node.

In DOM 2, it uses the currentTarget property of Event, which reference the object the handler is being executed.

Here is the same example as before, excepts implemented in the DOM 2 event model.

The program checks input for two text boxes. If either or both input are in the wrong format, alert messages are generated for the user to fix the input. Three files are included:

Mouse Events

Mouse events are JavaScript executed due to the user's action on a mouse device. Common events include click, dblclick, mouseup, mousedown and etc.

List of Mouse events examples can be found here

Timed Events

Timed events are JavaScript executed in time-intervals.

List of Timed Events examples can be found here

In Class Exercise Lab Assignment

The following program is done in DOM event model. It has three buttons labeled with colours. A corespondent alert message will be displayed when a spcific button is pressed.

Please modifify the scripts using DOM 2 event model.

Add a link on your index.html, please name it lab6_DOM2.

Upload your files in URcourses, lab assignment is due 11:55 PM.