Adobe Dreamweaver CC 2014 v.13 - Manual (Page 724)

Using JavaScript behaviors (general instructions)
To the top
To the top
About JavaScript behaviors
Behaviors panel overview
About events
Apply a behavior
Change or delete a behavior
Update a behavior
Download and install third-party behaviors
Note: The user interface has been simplified in Dreamweaver CC and later. As a result, you may not find some of the options described in this
article in Dreamweaver CC and later. For more information, see
this article .
About JavaScript behaviors
Adobe® Dreamweaver® 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.
Show All Events Displays an alphabetical list of all events for a given category.
Add Behavior (+) Displays a menu of actions that can be attached to the currently selected element. When you select an action from this list, a
dialog box appears in which you can specify parameters for the action. If all the actions are dimmed, no events can be generated by the selected
element.
Remove Event (–) Removes the selected event and action from the behavior list.
Up and down arrow buttons Move the selected action up or down in the behavior list for a particular event. You can change the order of actions
only for a particular event—for example, you can change the order in which several actions occur for the onLoad event, but all the onLoad actions
stay together in the behavior list. The arrow buttons are disabled for actions that can’t be moved up or down in the list.
717