Learn Modern Unobtrusive JavaScript
Unobtrusive Events
The first aspect of JavaScript that we are going to cover in this modern approach to JavaScript programming is events. An event is something that happens to your web page usually due to an action on the part of your visitor who is viewing the web page.
We saw our first event in the "Hello World" tutorial - the load event which is triggered when the page finishes loading. JavaScript provides us with two ways to process events. These are event handlers and event listeners. All of the browsers that understand JavaScript understand event handlers. All modern browsers with the exception of Internet Explorer (which strictly speaking runs JScript rather than JavaScript) understand event listeners. IE has its own equivalent to event listeners and you can write code that will use whichever means of testing for an event that the browser provides. For the moment though we'll stick with event handlers since they are the easiest for you to work with.
To perform processing when a particular event is triggered we need to identify the object that the event belongs to, the event we are testing for, and what we want to happen when that event occurs. Let's look more closely at the one event handler that we had in the "Hello World" tutorial.
window.onload = hello;
In this particular case the object the event belongs to is the browser window itself. Event handlers attached to the window object detect their associated actions anywhere within the web page. The load event detects when the page finishes loading, unload detects when the page is about to finish unloading, resize detects that your visitor has resized their browser window.
In this example the event we are testing for is load. With event handlers we always add the word on to the front of the event name when we set up the event handler (event listeners do not do that).
We need to assign something to be performed when the event is triggered. The = symbol is always used in JavaScript to assign the value on the right to the method or property on the left.
The window is not the only object we can attach events to. We can attach events to any object within the web page provided that we have a way of uniquely identifying that object. Actually we have already seen how to do that too in the "Hello World" tutorial where we used the DOM to reference the field within the page where we wanted to insert some text. Well we can use some very similar code to reference a field in the page where we want to attach an event handler.
There are all sorts of events that you can test for. Some events are more commonly used with some objects within the web page than others (or in some cases may only be able to be used with a specific type of object). One event that you can test for on almost any object in the page at all is the mouse click. Let's look at a simple example of how to do this by adding a second paragraph to our "Hello World" page and only display that text when your visitor clicks on the new paragraph (instead of when the page loads). Here's our updated HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="click.js"></script>
</head>
<body>
<p id="click">Click Here.</p>
<p id="hello"></p>
</body>
</html>
The JavaScript to go in the click.js file is:
function hello() {
document.getElementById('hello').innerHTML = 'Hello World';
}
function start() {
document.getElementById('click').onclick = hello;
}
window.onload = start;
So now our code contains two functions each of which accesses a different paragraph within our page. As before we need to make sure that the objects within the web page that we want to reference actually exist prior to our typing to reference them and so our start function to add the event handler to our first paragraph is attached to the load event so that it doesn't run until the page finishes loading.
As the hello function is now attached to the new paragraphs click event by the start function it can't possibly be run before the page is loaded since the event to trigger it isn't added to the page until after the page has loaded.
So with this page, the page loads up with the words "Click me." appearing on the page. When you click on that text after the page is loaded then the words "Hello World" are inserted into the second paragraph.
No comments:
Post a Comment