Browser objects, part two

Notes from May 11, 2005 class

Connecting code to Web page events

The objects of the BOM (Browser Object Model) have events associated with them. Events occur when something happens, such as when the user clicks on some text or an image. To call a function when an event happens, we use an event handler.

Event handlers always start with the word "on" and the event they'll handle: onclick, onload, etc.

Event handlers as attributes

You can add an event handler's name (and the code you want to execute) as an attribute of an HTML tag:

<p><a href="http://www.badgerbadgerbadger.com/" name="linkSomePage" onclick="alert('You clicked?')">Now that's annoying!</a></p>

If, however, you want a number of lines of JavaScript to execute when the link is clicked, define the function and call it in the onclick code.

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

<!--

function linkSomePage_onclick()
{
alert("You clicked?");
return true;
}

//-->

</script>

<p><a href="http://www.badgerbadgerbadger.com/" name="linkSomePage" onclick="return linkSomePage_onclick()">Now that's annoying!</a></p>

Window object event handlers go into the body tag, like this:

<body language="JavaScript" onload="performMyFunction()">

which would run a function called "performMyFunction" when the page loads

Event handlers as properties

If you want to capture an event for which there's no HTML tag to which you can add your event handler as an attribute, or if you want the code attached to an event handler that'll be changed dynamically, you can use the event handler as a property.

Two steps:

  1. Define the function that will be executed when the event occurs
  2. Set that object's event handler property to the function you defined.

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

<!--

function linkSomePage_onclick()
{
alert("This is going nowhere");
return false;
/* return false connects the hyperlink to the function, but keeps the href from loading after the script is done. return true would load the hyperlink after the function has run. */
}

//-->

</script>

<p><a href="http://www.badgerbadgerbadger.com/" name="linkSomePage">Now that's annoying!</a></p>

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

<!--

window.document.links[0].onclick = linkSomePage_onclick;
// this connects the object's event to the function

//-->

</script>

Displaying a random image when the page loads

<html>

<head><title>Random images</title></head>

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

<!--

var myImages = new Array("badger.jpg","mushroom.jpg","snake.jpg","cat.jpg");
// array that contains the image sources

function changeImg(imgNumber)
/* use the passed parameter to declare a new variable that points to the image that was clicked, by way of its img object in the images[] array */
{
var imgClicked = document.images[imgNumber];
var newImgNumber = Math.round(Math.random() * 3);
// random number for the index of the image src from the array
while (imgClicked.src.indexOf(myImages[newImgNumber]) != -1)
{
newImgNumber = Math.round(Math.random() * 3);
// ensures we don't select the same image as the current image
}
imgClicked.src = myImages[newImgNumber];
// sets the src of the img object to the new value

return false;
/* return false stops the link from trying to navigate to another page. The link is only there to provide a way of capturing an onclick event. */
}

//-->

</script>

<body>

<h1>Random images</h1>

</body>

<a href="" name="linkImg1" onclick="return changeImg(0)">
<!-- hyperlink is here to give us a place to put the onclick event handler -->
<img name=img0 src="badger.jpg" border="0" alt="" />
</a>

<a href="" name="linkImg2" onclick="return changeImg(1)">
<img name=img0 src="mushroom.jpg" border="0" alt="" />
</a>

</html>