Using Event Handlers
o So far, our scripts have run as soon as the browser page has loaded. Even when we have used functions to “package” our code, those functions have run as soon as they have been called in the page, or not at all if no call was made. In other words, the only event our scripts have so far responded to has been the event of our page loading into the browser window.
o Most of the time, however, you will want your code to respond specifically to user activities. You will want to define functions, and have them spring into action only when the user does something. Enter event handlers.
o Every time a user interacts with the page, the browser tells JavaScript about an “event” happening. That event could be a mouse click, a mouse pointer moving over or out of a given element (such as an image or a paragraph), a user tabbing to a new part of an HTML form, the user leaving the page, the user submitting a form and so on.
o An event handler is a bit of JavaScript code that allows us to capture each event as it happens, and respond to it by running some JavaScript code.
o In general, we attach event handlers to specific HTML tags, so a mouse click on one element of the page might be captured by an event handler, but clicking somewhere else might do something completely different, or indeed nothing at all. o Some common event handlers are in the table below:
| Event Handler | Occurs When… |
| onload | An element is loaded on the page |
| onunload | An element is not loaded, for example when a user leaves a page |
| onmouseover | When the mouse pointer enters the area defined by an HTML element |
| onmouseout | When the mouse pointer leaves the area defined by an HTML element |
| onclick | When the left mouse button is clicked within the area defined by an HTML element |
| onmousedown | When the left mouse button is depressed within the area defined by an HTML element |
| onmouseup | When the left mouse button is released within the area defined by an HTML element |
o The last three are related, but there are subtle differences – onclick is defined as being when both mousedown and mouseup events happen in the given element’s area. For example, if you click on an area of the page, that registers the area’s mousedown event. If you then hold the mouse down and move to another area before releasing, it will register the other area’s mouseup event. The browser’s click event, however, will remain unregistered.
o In theory, we can add most of these event handlers to just about any HTML tag we want. In practise, many browsers restrict what we can interact with.
o We will mostly be attaching event handlers to <img>, <a> and <body> tags.
o To attach an event handler to a tag, we use the following method:
<a href=”…” onclick=”a_function();”>link</a>
o We can use this method to attach any event handler listed above to the elements of the page. In addition to calling functions (with any optional arguments, of course), we can write JavaScript directly into our event handlers:
<a href=”…” onclick=”alert(‘hello’);”>link</a>
o Note the potential issue with quote marks here – if you use double quotes around your event handler, you need to use single quotes within and vice versa.
Project
o Open your previous project file, and save it under the name chapter_21.html. o Clear all JavaScript code from your script tags.
o Ensure that you have a script element in the head area of your document, and none in the body area.
o Within the head area script element, define the following function:
function set_status( msg )
{
window.status = msg; }
o When called, this function will set the text displayed in the browser’s status bar (the part of the window below the page content) to whatever is passed as an argument. For example, to set the status bar to display “Welcome”, we would call:
set_status(“Welcome”);
o Now define the following function immediately below the last:
function clear_status( )
{
set_status(“”); }
o When called, this function will clear the status bar. Notice that we are using our previous function within the new one. This is a common programming technique that allows us to define functions of specific cases using more general functions.
o Now, add the following HTML to the body area of your page. Remember, we’re adding HTML here, not JavaScript, so do not be tempted to use script tags for this part of the project:
<a href=”#” ↵
onmouseover=”set_status(‘hello’);” onmouseout=”clear_status();”>testing</a>
o Load the page in your browser and observe what happens when you move your mouse over the link.
o The # value for the href attribute of the link allows us to define a “dead” link on the page. Clicking on the link will take you nowhere – try it.
o Now, alter the code to have the link point at a real website that you know of.
o Clicking on the link now will take you away from the page. Let’s say we want to suppress that behaviour.
o When an event handler intercepts an event, it pauses the normal action of the event. For example, if you used an onclick handler on a link to pop up an alert box, the link would only be followed after the alert box had been dismissed. We can use event handlers to cancel the action if required by using their return values.
o Add a new function to the head area script element:
function confirm_link( )
{ check = confirm(“This will take you away from our site. Are you sure?”); return check; }
o The value of check will be true or false.
o Now, modify your link to contain the following event handler:
onclick=”return confirm_link();”
By using the word return in our event handler, the response of the function will be used to decide whether the rest of the normal action is run. In this case, if confirm_link() returns false, our link action will be cancelled. o Load your page in your browser and view the result.
Recent Comments