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:

List of DOM Events

The next couple sections highlight some interesting event types for you to learn about. As part of the lab, you will need to know about submit and reset events for form processing. You might also want to learn about these two form related events:

There are too many events to list in the lab notes, but a long list of DOM events can be found at W3Schools here

Mouse Events

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

List of Mouse events examples can be found in the extensive list of DOM events on W3Schools 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

Complete the following sign up form in DOM2 model. SignUp form is given, you need to complete validate.js and SignUp-r.js

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

Zero will be given if lab assignment link is not provided on the index.html

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