|
Every time anything happens to a page or an object in the page an event is triggered. Here are a few examples of events.
onload, onChange, onMouseOver, onResize, onError, onUnload, onSubmit, onAbort, onClick, etc, etc...
We can use these events to trigger our scripts, or more correctly, to trigger a function. There are two ways you can make these connections.
The easiest (and most of the time the best) way is to attach the event handler to the HTML tag we want to use. If we want a message to be displayed when the page has fully loaded we can use a "onload" in the body tag, like this:
<body bgcolor="#ffffff" onLoad="myFunction()">
The other way is a bit more complicated and I think you should stay away from it, unless there is a good reason to use it. This time we use JavaScript to create the connection, like this.
<script type="text/javascript">
<!--
window.onload=myFunction
function myFunction(){
alert("Hello world!")
}
// -->
</script>
There are a number of things you need to keep in mind when you use this method.
- Note that you can't use the parentheses after "myFunction", this means that you can't send parameters to the function in this scenario. It's is also vital that the "window.onload=myFunction" statement is outside all functions, or it won't be executed!
- You will be "hijacking" the onload event, so if you have other onload connections in the body tag they will not work as expected.
- Remember that this method can conflict with other similar triggers in HTML tags.
A very common scenario for many people is when you want to trigger a custom script from the body tag but when you look a the tag you find that GoLive already has added a lot of stuff in there. Is it possible to add your own trigger then?
Yes, and it's very easy! Let's say that you find this body tag:
<body onLoad="CSScriptInit();" bgcolor="#ffffff">
The "CSScriptInit();" is standard GoLive code and starts the execution of GoLive actions. Now we will add the trigger we used earlier:
<body onLoad="CSScriptInit();myFunction();" bgcolor="#ffffff">
When the page is loaded the GoLive scripts will be executed, then our script. That was pretty easy, don't you think?
We will be using a lot of event handlers in other tutorials so I think this will be enough for now. If you want to do some experimenting you can try this:
Place this script in the head section of your page:
<script type="text/javascript"><!--
function myFunction(){
alert("Hello world!")
}
// -->
</script>
Now try to make the message display when:
- The page is resized.
- When an image is fully loaded.
- When you leave the current page.
Back to tutorial index <<
|
