HTML and CSS Reference
In-Depth Information
programmatically associate the code you want to run when that event occurs with the
appropriate event handler for that tag. Table 14.4 provides a list of the event handlers that
JavaScript provides.
TABLE 14.4
JavaScript Event Handlers
Event Handler
When It's Called
Whenever a visitor leaves a specified form field
onblur
Whenever a visitor changes the contents of a specified form
field
onchange
Whenever a visitor clicks a specified element
onclick
Whenever a visitor enters a specified form field
onfocus
Whenever a page and all its images have finished loading
onload
Whenever a visitor places the mouse cursor over a specified
object
onmouseover
Whenever a visitor selects the contents of a specified field
onselect
Whenever a visitor submits a specified form
onsubmit
Whenever the current web page is changed
onunload
First, let me explain how to bind an event using HTML attributes. All the event handlers
listed above can be used as attributes for tags that respond to them. For example, the
onload
handler is associated with the
body
tag. As you know, JavaScript code is exe-
cuted as soon as it is encountered. Suppose you want to write a script that modifies all
the links on a page. If that script is executed before all the links have been loaded, it will
miss some of the links. Fortunately, there's a solution to this problem. The
onload
event
does not occur until the entire page has loaded, so you can put the code that modifies the
links into a function and then bind it to the page's
onload
event. Here's a page that uses
onload
:
<!DOCTYPE html>
<html>
<head>
<title>
Modifying Links with JavaScript
</title>
<script type=”text/javascript”>
function linkModifier() {
for (var i = 0; i < document.links.length; i++) {
document.links[i].href = “http://example.com”;
}
}
</script>
</head>
<body onload=”linkModifier()”>
