Applying Events to DHTML Web Pages Using Javascript and the DOM

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 .

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

<div id="messageDiv" style="margin-bottom:5px;">Click the button below</div>

<input name="button1" type="button" id="button1" onclick="document.getElementById('messageDiv').innerHTML='You clicked!' ;" value="Click" />

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

<div id="messageDiv" style="margin-bottom:5px;">Click the button below</div>

<input name="button1" type="button" id="button1" onclick="doSomething();" value="Click"/></div>

<script language="JavaScript" type="text/javascript" >

function doSomething()

{

document.getElementById('messageDiv').innerHTML='You clicked!'

}

</script>

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

<div id="messageDiv" style="margin-bottom:5px;">Click the button below</div>

<input name="button1" type="button" id="button1" onclick="doSomething();" value="Click"/></div>

<script language="JavaScript" type="text/javascript" >

var doSomething=function (){ document.getElementById('messageDiv').innerHTML='You clicked!' ;}

</script>

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

<div id="messageDiv" style="margin-bottom:5px;">Click the button below</div>

<input name="button1" type="button" id="button1" value="Click"/></div>

<script language="JavaScript" type="text/javascript" >

var myButton=document.getElementById("button1") ;

var doSomething=function (){ document.getElementById('messageDiv').innerHTML='You clicked!' ;} ;

myButton.onclick=doSomething ;

</script>

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

Code view

<div id="messageDiv" style="margin-bottom:5px;">Click the button below</div>

<input name="button1" type="button" id="button1" value="Click"/></div>

<script language="JavaScript" type="text/javascript" >

var myButton=document.getElementById("button1") ;

var doSomething=function()

{

document.getElementById("messageDiv").innerHTML="You clicked!" ;

this.onclick=function(){document.getElementById("messageDiv").innerHTML="You clicked again!" ;} ;

}

myButton.onclick=doSomething

</script>