Welcome back to another episode in my JavaScript tutorials. I was going to go into how to create your own classes this time, but I realised I haven’t done anything about functions and events. These two topics are more important in being able to create dynamic pages than objects are, so I decided I better go in-depth into these first.
As I’ve already gone over how to define a function, but what can you do with them? Well, just like in any other language, you can use them to split up your routines to take advantage of code reuse. Or, since JavaScript is an event driven language, you can use them as a callback from an event on a HTML element within your page. For example, say you have a link that needs to make something on your page change:
<a href="#">
Change this text to something else
</a> |
<a href="#">
Change this text to something else
</a>
To make it do what you’d want, you’d create a function like so:
function changeText(element){
element.innerText="Some new text";
} |
function changeText(element){
element.innerText="Some new text";
}
Now that you have this function, you need to somehow call it from your link. That’s where events come in. All HTML elements allow for some range of events to be called when they occur on that, or a child, element. One such event is the “click” event. This one seems the most logical for this situation.
Now there are three ways to listen for an event on an element. The first way is through directly embedding it in the HTML, the second is to use the element.onevent attributes, and the third is by using element.addEventListener() (or element.attachEvent() in the case of Internet Explorer browsers after version 5). The first and second options are supported by nearly all browsers for nearly all events, so I’ll deal with only these two from now on.
The function I’ve created above assumes the element will be passed into the function. In the case of the element.onevent attributes, in most browsers an event object is passed into the attached listener function by default and the element itself is passed as the “this” variable. So we can either change the function to allow for that difference, or we can just change the HTML to call our function and pass in the element. This second option seems better. So our link becomes:
<a href="#" onclick="changeText(this);return false;">
Change this text to something else
</a> |
<a href="#" onclick="changeText(this);return false;">
Change this text to something else
</a>
This will now call the above function to change the text. The return false part of the listener tells the browser to not perform its default operation, which would be to follow the link to the address it points to.
You are also able to gain access to the event object mentioned above within the HTML onevent attributes, with the variable “event”. In a way, setting the onevent attributes on a HTML element is a little like the declaration:
element.onevent=function(event){
// value of onevent attribute
} |
element.onevent=function(event){
// value of onevent attribute
}
within JavaScript.
The event object has a moderate list of attributes to tell you about the event that has just occurred, including what keys on the user’s keyboard were pressed when the event occurred, the element involved with the event, and other bits of information about the event itself.
The best way to find out what events you can listen for on any element is by using a JavaScript debugging tool within your browser to obtain an element on your page, and having a look at the attributes it includes. All events have a name starting with “on” (to signify the function will be called “on” that event).
That’s about all for functions and events. Thanks for reading.
Robert