Use JavaScript behaviors (general instructions)

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.

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.

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:

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.

Displays an alphabetical list of all events for a given category.

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.

Removes the selected event and action from the behavior list.

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.

Displays a pop‑up menu, visible only when an event is selected, of all the events that can trigger the action (this menu appears when you click the arrow button next to the selected event name). Different events appear depending on the object selected. If the events you expect don’t appear, make sure that the correct page element or tag is selected. (To select a specific tag, use the tag selector at the lower-left corner of the Document window.)

About events

Each browser provides a set of events that you can associate with the actions listed in the Behavior panel’s Actions (+) menu. When a visitor to your web page interacts with the page—for example, by clicking an image—the browser generates events; those events can be used to call JavaScript functions that perform an action. Dreamweaver supplies many common actions that you can trigger with these events.

For names and descriptions of the events provided by each browser, see the Dreamweaver Support Center at www.adobe.com/go/dreamweaver_support.

Different events appear in the Events menu depending on the selected object. To find out what events a given browser supports for a given page element, insert the page element in your document and attach a behavior to it, then look at the Events menu in the Behaviors panel. (By default, events are drawn from the HTML 4.01 events list, and are supported by most modern browsers.) Events may be disabled (dimmed) if the relevant objects do not yet exist on the page or if the selected object cannot receive events. If the expected events don’t appear, make sure the correct object is selected.

If you’re attaching a behavior to an image, some events (such as onMouseOver) appear in parentheses. These events are available only for links. When you select one of them, Dreamweaver wraps an <a> tag around the image to define a null link. The null link is represented by javascript:; in the Property inspector’s Link box. You can change the link value if you want to turn it into a real link to another page, but if you delete the JavaScript link without replacing it with another link, you will remove the behavior.

To see which tags you can use with a given event in a given browser, search for the event in one of the files in the Dreamweaver/Configuration/Behaviors/Events folder.

Apply a behavior

You can attach behaviors to the entire document (that is, to the <body> tag) or to links, images, form elements, and several other HTML elements.

The target browser you select determines which events are supported for a given element.

You can specify more than one action for each event. Actions occur in the order in which they’re listed in the Actions column of the Behaviors panel, but you can change that order.

Change or delete a behavior

After attaching a behavior, you can change the event that triggers the action, add or remove actions, and change parameters for actions.

Update a behavior

Download and install third‑party behaviors

Many extensions are available on the Exchange for Dreamweaver website (www.adobe.com/go/dreamweaver_exchange).

For more information, see Add and manage extensions in Dreamweaver.