Part I - HTML and Scripting | |
 | Part II - Document Structure The HTML Document Programming Element Collections Scripts and Elements Scripting Individual Elements Forms and Intrinsic Controls |
Part III - Dynamic Styles and Animation | |
Part IV - Dynamic Content | |
| Inside Dynamic HTML |
Order Now |
Inside Dynamic HTML
|
| Event | Source |
| onblur | Link anchors |
| onclick | All anchors |
| ondblclick | All anchors |
| onfocus | Link anchors |
| onkeydown | Link anchors |
| onkeypress | Link anchors |
| onkeyup | Link anchors |
| onmousedown | All anchors |
| onmousemove | All anchors |
| onmouseout | All anchors |
| onmouseover | All anchors |
| onmouseup | All anchors |
However, through event bubbling, the Anchor element can receive the event from a child event (such as an image in the anchor) even if it does not explicitly support it. The preceding table lists the events for which each type of anchor can act as the source. All events can be defined as attributes on the element, through the <SCRIPT FOR= EVENT= > syntax or through properties of the Anchor element. To be a source for focus and keyboard events, an element must be able to receive the focus. Anchors that are links can receive the focus; bookmarks cannot.
The default result of clicking on a link is a jump to the anchor. This action can be overridden to customize how a page handles a link. The following code cancels the default action of a specific link:
<A HREF="foo.htm#100" ONCLICK="event.returnValue = false;">
If you want compatibility with other browsers, return the value directly:
<A HREF="foo.htm#100" ONCLICK="return false;">
More generically, anchors can be overridden at the document level by handling the document's onclick event, as shown in the following code. This technique works because the standard events, except onblur and onfocus, bubble up the document's hierarchy chain.
<SCRIPT FOR="document" EVENT="onclick()" LANGUAGE="JavaScript">
// Event object contains global information for the event handler.
if ("A" == event.srcElement.tagName) {
event.returnValue = false;
// Write custom handler code for the anchor.
}
</SCRIPT>
The event sequence defines the ondblclick event to follow the onclick event. The only way to determine whether a link received a double click is to override the default action of the single click because the event sequence is fixed. There is no way to write an event handler for a link that performs a default action for a click event and a different action for the double click because the link already navigates to the targeted link before the ondblclick event fires. Therefore, the usefulness of an ondblclick event on a link is fairly limited, and most interactions with anchors are accomplished using the onclick event.
Customizing Links to Target Multiple FramesRun Sample
One technique for adding custom behavior to an anchor is to define a few new attributes on the Anchor element. This technique for simulating subclassing was introduced in Chapter 8, "Scripts and Elements." This section demonstrates how to augment the traditional behavior of anchors. The simple example presented here implements the basics for a much-requested feature of HTML and framesets--the ability to target multiple frames with a single anchor. This example demonstrates how authors can add their own functionality to a page, without having to wait for the browser to add the support.
The following code adds two user-defined attributes to the Anchor element: mhref and mtarget. Both attributes take a semicolon-delimited list of values--for mhref, a list of URLs, and for mtarget, a list of destinations for these URLs. When the user clicks on an anchor, the code first checks whether the anchor has these special attributes and, if it does, the code overrides the default behavior of following a single link with the custom linking code.
<HTML>
<HEAD>
<TITLE>Targeting Multiple Frames</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function checkElementTree(el, strTag) {
/* This simple function walks up the tree from the element
el and looks for any element with the tag strTag.
The first matching element found is returned. */
while ("HTML" != el.tagName) {
if (strTag == el.tagName)
return el;
el = el.parentElement;
}
return null;
}
function multiJump() {
// Find the anchor.
var el = checkElementTree(event.srcElement, "A");
if (null != el) { // Found an anchor.
// Check whether it is a multitarget anchor.
if ((null != el.getAttribute("mhref")) &&
(null != el.getAttribute("mtarget"))) {
event.returnValue = false;
var mhref = new Array();
var mtarget = new Array();
// Parse attributes into arrays.
mhref = el.getAttribute("mhref").split("; ");
mtarget =
el.getAttribute("mtarget").split("; ");
/* Be sure there are an equal number
of targets and URLs. */
if (mtarget.length == mhref.length)
for (var intLoop = 0; intLoop < mtarget.length;
intLoop++)
if (null != parent[mtarget[intLoop]])
parent[mtarget[intLoop]].location.href =
mhref[intLoop];
}
}
}
</SCRIPT>
</HEAD>
<BODY ONCLICK="multiJump();">
<A HREF="#"
mhref="http://www.microsoft.com; http://www.netscape.com"
mtarget="left; right">
Browser Web sites
</A>
</BODY>
</HTML>
This code works only for frames that are siblings to the frame containing it. To make this code work for frames that exist anywhere in the frameset hierarchy, you must write code that simulates the searching algorithm used by the browser to search the hierarchy of windows.
Subclassing elements with user-defined attributes is one of the most powerful ways to take advantage of Dynamic HTML. It lets you easily customize elements, without having to hard-code the customizations into HTML or the scripting language. Custom attributes can be defined for identifying new behavior, and the code can look for these identifiers and process the elements accordingly.
Pseudo-Classes for Anchors
Style sheets provide a technique for defining styles for the three states of a link: visited, not visited, and active. These states can each have a different style, which you set using pseudo-classes in CSS. Pseudo-classes provide a technique for improving user interactivity without requiring any code. See Chapter 1, "Overview of HTML and CSS," or the CSS specification at the W3C Web site for more information about pseudo-classes and the CSS language.
Beyond using the pseudo-class, no property is currently exposed to the scripting language for directly determining whether a link has been visited. Therefore, there is no simple way to conditionally script links based on whether they have been visited.
Removing Anchors
Simply assigning an empty string to either the href or the name property does not remove an Anchor element from the document. However, this technique will remove the element from the links or anchors collection, respectively. (The element will always remain in the all collection.)
An Anchor element and its contents can be completely removed from the document by using the outerHTML or outerText properties. To remove the influence of the anchor but leave the contents, the TextRange object can be used. The following code demonstrates how to manipulate TextRange. Don't worry if you do not understand this code. The TextRange object and its methods are discussed in detail in Chapter 14, "User Selection and Editing Operations."
<SCRIPT LANGUAGE="JavaScript">
function removeAnchor(aElement) {
// The anchor to remove is passed as an argument.
// Create a TextRange object.
var tr = aElement.parentTextEdit.createTextRange();
// Locate the Anchor element in the textRange.
tr.moveToElementText(aElement);
// Execute a command to remove the Anchor element.
tr.execCommand("Unlink", false);
}
</SCRIPT>
Next Section:
Programming the Link Element