Operation Manual

328
Last updated 3/28/2012
Chapter 12: Adding JavaScript behaviors
Using JavaScript behaviors (general instructions)
About JavaScript behaviors
Adobe® Dreamweaver® CS5 behaviors place JavaScript code in documents so that visitors can change a web page in
various ways or initiate certain tasks. A behavior is a combination of an event and an action triggered by that event. In
the Behaviors panel, you add a behavior to a page by specifying an action and then specifying the event that triggers
that action.
Note: Behavior code is client-side JavaScript code; that is, it runs in browsers, not on servers.
Events are, effectively, messages generated by browsers indicating that a visitor to your page has done something. For
example, when a visitor moves the pointer over a link, the browser generates an
onMouseOver event for that link; the
browser then checks whether it should call some JavaScript code (specified in the page being viewed) in response.
Different events are defined for different page elements; for example, in most browsers
onMouseOver and onClick are
events associated with links, whereas
onLoad is an event associated with images and with the body section of the
document.
An action is pre-written JavaScript code for performing a task, such as opening a browser window, showing or hiding
an AP element, playing a sound, or stopping an Adobe Shockwave movie. The actions provided with Dreamweaver
provide maximum cross-browser compatibility.
After you attach a behavior to a page element, the behavior calls the action (JavaScript code) associated with an event
whenever that event occurs for that element. (The events that you can use to trigger a given action vary from browser
to browser.) For example, if you attach the Popup Message action to a link and specify that it will be triggered by the
onMouseOver event, then your message pops up whenever someone places the pointer over that link.
A single event can trigger several different actions, and you can specify the order in which those actions occur.
Dreamweaver provides about two dozen actions; additional actions can be found on the Exchange website at
www.adobe.com/go/dreamweaver_exchange as well as on third-party developer sites. You can write your own actions
if you are proficient in JavaScript.
Note: The terms behavior and action are Dreamweaver terms, not HTML terms. From the browser’s point of view, an
action is just like any other piece of JavaScript code.
Behaviors panel overview
You use the Behaviors panel (Window > Behaviors) to attach behaviors to page elements (more specifically to tags)
and to modify parameters of previously attached behaviors.
Behaviors that have already been attached to the currently selected page element appear in the behavior list (the main
area of the panel), listed alphabetically by event. If several actions are listed for the same event, they will be executed
in the order in which they appear on the list. If no behaviors appear in the behavior list, no behaviors have been
attached to the currently selected element.
The Behaviors panel has the following options:
Show Set Events Displays only those events that have been attached to the current document. Events are organized into
client-side and server-side categories. Each category’s events are in a collapsible list. Show Set Events is the default view.