Applying Events to DHTML Web Pages Using Javascript and the DOM

Page content


The area of least compliance between browsers and the Document Object Model (DOM) is the event object model. But we can apply events to web elements as we would a property - such as onclick="some action…” . We can do this by setting the onclick attribute in the tag code or through JavaScript. Setting an event action is more powerful and flexible if done through a script as we’ll see in the following examples. The tag format used in this article is XHTML but the same holds true for HTML .

Set the OnClick Event in the Tag Code

The code below shows a div and button element. Clicking the button (firing the button’s onlick event) will change the innerHTML of the div element from “Click the button below” to “You clicked!". We’re applying the getElementById(tagID) DOM method to set the button’s onclick attribute / property, right in the tag definition.

Code view

Set the OnClick Event by JavaScript

The source code is the same as in the previous example except for setting the button’s onclick property by calling or referencing a JavaScript function.

Case 1: By calling a named function object

Here the function “doSomething” is a function object that does not return a result but performs an action; it changes the content of the div whose id is “messageDiv”. So if the onclick event of the button is set to “doSomething()", the function is immediately executed when the user clicks the button.

Code view

Case 2: By calling an object whose type is an anonymous function

In this case, doSomething is a javascript object whose type is an anonymous function and constructor is the code to the right of the equal sign. A document.writeln(doSomething) will write out the constructor of doSomething as a string; “function (){ document.getElementById(‘messageDiv’).innerHTML='You clicked!’ ;}".

To execute doSomething, include the left and right parenthesis; “doSomething()".

Code view

Case 3: By referencing an object whose type is an anonymous function

The button’s onclick event is set by accessing it with the DOM getElementById(tagID) method and setting the onclick to doSomething . This assigns the doSomething object constructor to the button’s onclick attribute.

Code view

*Note With this technique, you can also change the onclick property after the button is clicked by using the this statement.

Code view

This post is part of the series: Web Design using DHTML and the DOM

Creating web sites with DHTML based on the DOM can increase server performance, lower bandiwdth utilization and solve most cross-browser compatibility issues.

  1. Getting Elements Using the HTML DOM and JavaScript
  2. Applying Events to DHTML Web Pages Using Javascript and the DOM
  3. Validating Input at the Client: Check for blank or required fields
  4. Validating Input at the Client: trim the field
  5. Validating Input at the Client: check numeric value fields
  6. Leveraging CSS Styles
  7. DOM getElementsByTagName Method for Bulk Element Formating
  8. Unraveling the JavaScript Switch Statement