Events II: More Advanced Event Handling

The document object model, or DOM, provides a way to refer to every object in a web page. If an object can be referred to, its properties, including its text, can be changed.

In the Events I section, we used the DOM only to refer to the current object. The object which was clicked upon was always the object which was modified.

By using the DOM, objects can be referred to, and modified, from any other object on the page. This allows us to make invisible text visible, among other advantages.

Browsers able to recognize event handlers should be able to recognize DOM names, because the DOM was standardized at the same time as event handlers.

Click here for a brief review of The DOM.

Accessing the DOM -- Using getElementById()

It is possible to access some objects using the DOM arrays: anchors[i], images[i], and forms[i]. That is, it is possible to refer to an image as
document.images[2]
provided you are sure of its array number.

However it is easier to give the object an id such as str1. Then it becomes:
document.images.str1 .

There is a simple method, which works on all objects, whether their tags have DOM names or not.

document.getElementById() is a method or function belonging to the document. Its argument is the id (not the name) of the object you wish to access. Thus the first step is to id the object. Let's set up a button to change the color of a paragraph.

<p id="pex">
Here is the special paragraph, whose color you can change with the click of a button.
</p>
<form>
<input type="button"  value="Click Me"
                     onclick="getElementById('pex').style.color='green'">
                     ondblclick="getElementById('pex').style.color='red'">
</form>

Here is the special paragraph, whose color you can change with the click of a button.

Note: In my hands, onclick and ondblclick are the only event handlers that work predictably with button.

Changing Text -- by clicking on something else

In this example, the text of one paragraph is changed by clicking on the other paragraph. "innerHTML" refers to the text of the paragraph.

‹p id="p1" onclick="getElementById('p2').innerHTML='New Text'">
Click the mouse on this text to see what happens
‹/p>
‹p id="p2" onclick="getElementById('p1').innerHTML='New Text'">
Click the mouse on this text to see what happens
‹/p>

Click the mouse on this text to see what happens

Click the mouse on this text to see what happens.

Changing Images -- by clicking on text

With images, the source file "src" is changed to that of a new image.

‹img src="hackanm.gif" width="8%" name="hack">
 
‹p onclick="getElementById('hack').src='boy.gif';
                 getElementById('hack').style.width='16%'"
        ondblclick="getElementById('hack').src='hackanm.gif';
                    getElementById('style').style.width='8%'">  
Click here to change the image.  Double click to change back.
‹/p>

Click here to change the image. Double click to change back.

Making Things Appear and Disappear-- with Display

<p
 onclick="getElementById('stuffy').style.display=''"
onmouseout="getElementById('stuffy').style.display='none'">
Click here, then mouse out.
</p>
<img src="hackanm.gif" id="stuffy" style="display:none">

Click here, then mouse out.

Click here, then double click.

This paragraph will disappear, and reappear.

I used no script tags, but this must be javascript coding, bc the id was case sensitive.

Making Text Appear and Disappear -- with Visibility

Opening Windows

Usually when we want to open a window, we use a link: the anchor tag. The target attribute gives us a little control over the window opened. Thus target="_blank" opens a new window. To open the window, the user must click on the link.

Internet Explorer has provided two additional methods of opening windows, which give us a great deal more flexibility:

the window.open( ) method,
the window.createPopup( ) method.

These windows can be opened not only by a mouse click, but by scripts.

Window.open( ) has been available since IE3, createPopup() since IE5.5.

window.open( )

The window.open( ) method is straightforward to program. It can be used to open a file, a program, or another web page.

Using scripts, a window can be set to open at some later time, with no one near the computer. This feature is loved by computer students, who use it to interrupt their fellows -- e.g. the 'Energizer Bunny'. It could also be used effectively by teachers, to signal the beginning of class, the ending of an assignment, etc.

The window.open( ) method allows initial sizing of the window.

<p onclick="window.open
   ( 'abcd.mid',
     '_parent',
     'width=480,height=250,left=250,top=250,status=yes,resizable=yes');">
     Click here to open a window.
</p>

Click here to open a window.

window.createPopup( )

The window.createPopup( ) method is used to display a bit of html code or text. Its uses are similar to those of the CSS display property. It has the nice property that it automatically closes when you click elsewhere on the page.

The popup is not really a window, but a div. It is a rectangle filled with html code.

Its position, size, color, etc. are set when it is created. It is not resizeable.

It is created with the window.createPopup( ) method, and displayed with the window.createPopup.show(x,y,w,h,ref) method, where

x and y are the coordinates of the upper left corner,
w and h are the width and height,
ref is the object to which the x,y coordinates are relative.

<script type="text/javascript">
var pops=window.createPopup();
pops.document.body.style.backgroundColor="cyan";
pops.document.body.innerHTML="Pop Goes the Weasel.";
</script>

<p onclick="pops.show(150,150,200,50,document.body)">
Click here to open a popup.
</p>

Click here to open a Popup.

Ouch! This popup is only working in quirks mode!!!

Click here for official MSDN Data on Popups from Microsoft Corp.

Here's another popup.