UPDATE! I'm moving this site to: www.emirplicanic.com.

BeWebmaster

Dreamweaver Behaviors: Introduction and Events for 4.0 Browsers

Ad

Dreamweaver Behaviors are prepackaged JavaScript programs that let you easily add interactivity to your web pages. The generated code may be a little longer then what you may write on your own, but it is important to keep in mind that Macromedia engineers used their vast knowledge of JavaScript, HTML, and Web Browsers to create code that is cross-browser compatible. This compatibility may lead to larger files, but it also assures your web pages will work for wider audience.

Dreamweaver Behaviors can help you:

  • Validate forms - for example, make sure the email field is not empty before the form is submitted
  • Make layers appear and disappear
  • Open browser window to a specified size, with or without scroll bars, status bar etc.
  • Add pop-up menu navigation

Behavior Elements

There are three elements you need to bring together to use a behavior.

  1. Action - is whatever the behavior is supposed to do
  2. Event -  is a trigger that causes the action to happen
  3. HTML tag - the element you apply the action and event to

Applying Behaviors

To apply behavior using Dreamweaver, first you select the tag and then choose an action from the drop-down menu  in the Behavior panel.

Behaviors panel can be open in three ways:

  1. Choose Window->Behaviors
  2. Press Shift + F4
  3. If the tag inspector is open, click Behaviors tab

Selected HTML tag is indicated in the Behaviors panel title bar, and the list of any applied, if any, behaviors to that tag appears below. Each behavior is displayed in two columns (lists): Event list and Action list.

You can view behaviors in two different ways. You can switch between them using the buttons in the upper left corner of the Behavior panel.

  1. Show set events: behaviors applied to the selected tag
  2. Show all events: lists all of the events available to a particular tag

Add Actions (+) button brings a drop-down menu of actions you can add to selected tag. Some actions are grayed-out because your web page doesn't have elements necessary for the behavior to work. For example, if you don't have form element in your web page the Validate Form behavior is grayed out, or the behavior is not available for selected tag.

Delete Actions (-) button let's you remove actions from selected element.

When you select the action you want to apply, a dialog box opens to help you set options for that action. For example, when you choose the Go To URL action, Dreamweaver asks what web page you want to load.

The events list displays default event for the selected action. This may not be the only available event. Links, for example, can have many different events.  

You can control the list of available events by selecting "Show Events For..." option in the Add Actions drop-down menu. For best compatibility, I would suggest to leave it at the "4.0 or Later Browsers". Stay away from "IE 6" option. This option has many events but many of them don't work in other browsers.

4.0 Browser Events

Events can be triggered by mouse, keyboard and several relate to actions involving an entire web page or frameset. Some event occur on selection or highlighting and there are also form events. To make it easier to read I capitalized first letter of the words that make the event. Please note that the latest standard is to keep everything in lower case, thus onMouseOver should be used as onmouseover.

Mouse Events

Mouse events trigger on mouse movement or clicks.

onMouseOver
Triggered: When the cursor moves over the tag.
Tags: <a>, <area>

onMouseOut
Triggered: When the cursor moves off the tag.
Tags: <a>, <area>

onClick
Triggered: When the tag is clicked and mouse button released.
Tags: <a>, <area>, <input type="button | checkbox | radio | reset | submit">

onDblClick
Triggered: When the tag is double-clicked
Tags: <a>, <area>, <input type="button | checkbox | radio | reset | submit">

onMouseDown
Triggered: When the tag is clicked and the mouse button is not released
Tags: <a>, <img>, <input type="button | checkbox | radio | reset | submit">

onMouseUp
Triggered: When mouse button is released while cursor is over the tag. Same as onClick, but not supported in many browsers.
Tags: <a>, <img>, <input type="button | checkbox | radio | reset | submit">

Keyboard Events

Keyboard events respond to key presses and releases.

onKeyPress
Triggered: When key is pressed and released while the tag is selected.
Tags: <a>, <textarea>, <input type="file | password | text">

onKeyDown
Triggered: When the key is pressed while the tag is selected. The key doesn't have to be released for the event to occur.
Tags: <a>, <textarea>, <input type="file | password | text">

onKeyUp
Triggered: When key is released while the tag is selected.
Tags: <a>, <textarea>, <input type="file | password | text">

Body and Frameset Events

These events relate to actions involving an entire web page or frameset.

onLoad
Triggered: When a web page, and any embedded elements like images and flash load.
Tags: <body>, <image>, <frameset>

onUnload
Triggered: When a web page is about to be replaced by a new page.
Tags: <body>, <frameset>

onResize
Triggered: When user resizes web browser window.
Tags: <body>, <frameset>

onError
Triggered: When an error occures whila a web page or an image is loading.
Tags: <body, <img>

Selection and Highlighting Events

These occure when text or option from a form menu is selected.

onSelect
Triggered: When text in a form field is selected.
Tags: <textarea>, <input type="text">

onChange
Triggered: When text in a form field is changed
Tags: <select>, <textarea>, <input type="text | file | password">

onFocus
Triggered: When an element becomes the "focus" of the user attention. For example, when user clicks in the form text field.
Tags: <body>, <frameset>, <textarea>, <select>, <input type="text | button | file | checkbox | password | radio | reset | submit">

onBlur
Triggered: When an element loses the focus. Occurs when the user clicks outside of the field.
Tags: <body>, <frameset>, <textarea>, <select>, <input type="text | button | file | checkbox | password | radio | reset | submit">

Form Events

While form elements can respond to many events the form element itself can respond to only two events.

onSubmit
Triggered: When submit button in the form is clicked.
Tags: <form>

onReset
Triggered: When reset button in the form is clicked.
Tags: <form>

In the End...

I hope this short introduction helps you understand Dreamweaver Behaviors Panel and the main events that trigger actions. Soon I will publish an article explaining some of the Dreamweaver MX 2004 Actions.