在 Adobe Dreamweaver 中使用 JavaScript 行为

优质

小牛编辑

129浏览

2023-12-01

在 Adobe Dreamweaver 中使用 JavaScript 行为将 JavaScript 代码放置到文档中，这样访问者就可以通过多种方式更改网页或启动某些任务。

Adobe Dreamweaver 行为将 JavaScript 代码放置到文档中，这样访问者就可以通过多种方式更改网页或启动某些任务。行为是某个事件和由该事件触发的动作的组合。在“行为”面板中，您可以先指定一个动作，然后指定触发该动作的事件，以此将行为添加到页面中。

注意:行为代码是客户端 JavaScript 代码；即它运行在浏览器中，而不是服务器上。

实际上，事件是浏览器生成的消息，它指示该页的访问者已执行了某种操作。例如，当访问者将鼠标指针移到某个链接上时，浏览器将为该链接生成一个 onMouseOver 事件；然后浏览器检查是否应该调用某段 JavaScript 代码（在当前查看的页面中指定）进行响应。不同的页元素定义了不同的事件；例如，在大多数浏览器中，onMouseOver 和 onClick 是与链接关联的事件，而 onLoad 是与图像和文档的 body 部分关联的事件。

动作是一段预先编写的 JavaScript 代码，可用于执行诸如以下的任务：打开浏览器窗口、显示或隐藏 AP 元素、播放声音或停止播放 Adobe Shockwave 影片。Adobe Dreamweaver 所提供的动作提供了最大程度的跨浏览器兼容性。

在将行为附加到某个页面元素之后，每当该元素的某个事件发生时，行为即会调用与这一事件关联的动作（JavaScript 代码）。（可以用来触发给定动作的事件随浏览器的不同而有所不同。）例如，如果您将“弹出消息”动作附加到一个链接上，并指定它将由 onMouseOver 事件触发，则只要某人将指针放在该链接上，就会弹出消息。

单个事件可以触发多个不同的动作，您可以指定这些动作发生的顺序。

Adobe Dreamweaver 提供了 20 多个动作；您可以在 Exchange 网站 (www.adobe.com/go/dreamweaver_exchange_cn) 以及第三方开发商的站点上找到更多的动作。如果精通 JavaScript，您可以自己编写动作。

注意:术语行为和动作属于 Dreamweaver 术语，而非 HTML 术语。从浏览器的角度看，动作与其它任何一段 JavaScript 代码没有什么不同。

“行为”面板概述

使用“行为”面板（“窗口”>“行为”）可以将行为附加到页面元素（更具体地说是附加到标签），并可以修改以前所附加行为的参数。

已附加到当前所选页面元素的行为显示在行为列表中（面板的主区域），并按事件以字母顺序列出。如果针对同一个事件列有多个动作，则会按在列表中出现的顺序执行这些动作。如果行为列表中没有显示任何行为，则表示没有行为附加到当前所选的页面元素。

“行为”面板包含以下选项：

显示设置事件

仅显示附加到当前文档的那些事件。事件被分别划归到客户端或服务器端类别中。每个类别的事件都包含在可折叠的列表中。显示设置事件是默认的视图。

显示所有事件

按字母顺序显示属于特定类别的所有事件。

添加行为 (+)

显示特定菜单，其中包含可以附加到当前选定元素的动作。当从该列表中选择一个动作时，将出现一个对话框，您可以在此对话框中指定该动作的参数。如果菜单上的所有动作都处于灰显状态，则表示选定的元素无法生成任何事件。

删除事件 (–)

从行为列表中删除所选的事件和动作。

向上箭头和向下箭头按钮

在行为列表中上下移动特定事件的选定动作。只能更改特定事件的动作顺序，例如，可以更改 onLoad 事件中发生的几个动作的顺序，但是所有 onLoad 动作在行为列表中都会放置在一起。对于不能在列表中上下移动的动作，箭头按钮将处于禁用状态。

事件

显示一个弹出菜单，其中包含可以触发该动作的所有事件，此菜单仅在选中某个事件时可见（当单击所选事件名称旁边的箭头按钮时显示此菜单）。根据所选对象的不同，显示的事件也有所不同。如果未显示预期的事件，请确保选择了正确的页面元素或标签。（若要选择特定的标签，请使用“文档”窗口左下角的标签选择器。）

注意:括号中的事件名称只用于链接；选择其中的一个事件名称后将向所选的页面元素自动添加一个空链接，并将行为附加到该链接而不是元素本身。在 HTML 代码中，空链接以 href="javascript:;" 表示。

关于事件

每个浏览器都提供一组事件，这些事件可以与“行为”面板的“动作”(+) 弹出菜单中列出的动作相关联。当网页的访问者与页面进行交互时（例如，单击某个图像），浏览器会生成事件；这些事件可用于调用执行动作的 JavaScript 函数。Dreamweaver 提供多个可通过这些事件触发的常用动作。

有关每个浏览器提供的事件的名称和说明，请访问“Dreamweaver 支持中心”获取相关信息，网址是 www.adobe.com/go/dreamweaver_support_cn。

根据所选对象的不同，“事件”菜单中显示的事件也有所不同。若要查明对于给定的页面元素给定的浏览器支持哪些事件，请在您的文档中插入该页面元素并向其附加一个行为，然后查看“行为”面板中的“事件”菜单。（默认情况下，事件是从 HTML 4.01 事件列表中选取的，并受大多数新型浏览器支持。）如果页面中尚不存在相关的对象或所选的对象不能接收事件，则菜单中的事件将处于禁用状态（灰显）。如果未显示预期的事件，请确保选择了正确的对象。

如果要将行为附加到某个图像，则一些事件（例如 onMouseOver）显示在括号中。这些事件仅用于链接。当选择其中之一时，Dreamweaver 在图像周围使用 <a> 标签来定义一个空链接。在属性检查器的“链接”框中，该空链接表示为 javascript:;。如果要将其变为一个指向另一页面的真正链接，您可以更改链接值，但是如果删除了 JavaScript 链接而没有用另一个链接来替换它，则将删除该行为。

若要了解具体哪些标签可以在给定的浏览器中与给定的事件一起使用，请在 Dreamweaver/Configuration/Behaviors/Events 文件夹下的某个文件中搜索该事件。

应用行为

您可以将行为附加到整个文档（即附加到 <body> 标签），还可以附加到链接、图像、表单元素和多种其它 HTML 元素。

所选择的目标浏览器将确定对于给定的元素支持哪些事件。

您可以为每个事件指定多个动作。动作按照它们在“行为”面板的“动作”列中列出的顺序发生，不过，您可以更改这个顺序。

在页面上选择一个元素，例如一个图像或一个链接。
若要将行为附加到整个页，请在“文档”窗口左下角的标签选择器中单击 <body> 标签。
选择“窗口”>“行为”。
单击加号 (+) 按钮并从“添加行为”菜单中选择一个动作。
菜单中灰显的动作不可选择。它们灰显的原因可能是当前文档中缺少某个所需的对象。例如，如果文档不包含 Shockwave 或 SWF 文件，则“控制 Shockwave 或 SWF”动作将会变暗。
当您选择某个动作时，将出现一个对话框，显示该动作的参数和说明。
为该动作输入参数，然后单击“确定”。
Dreamweaver 中提供的所有动作都适用于新型浏览器。一些动作不适用于较旧的浏览器，但它们不会产生错误。
注意:目标元素需要唯一的 ID。例如，如果要对图像应用“交换图像”行为，则此图像需要一个 ID。如果没有为元素指定一个 ID，Dreamweaver 将自动为您指定一个。
触发该动作的默认事件显示在“事件”列中。如果这不是所需的触发事件，请从“事件”弹出菜单中选择其它事件。（若要打开“事件”菜单，请在“行为”面板中选择一个事件或动作，然后单击显示在事件名称和动作名称之间的向下指向的黑色箭头。）

更改或删除行为

在附加了行为之后，您可以更改触发动作的事件、添加或删除动作以及更改动作的参数。

选择一个附加有行为的对象。
选择“窗口”>“行为”。
进行更改：
- 若要编辑动作的参数，请双击动作的名称或将其选中并按 Enter (Windows) 或 Return (Macintosh)；然后更改对话框中的参数并单击“确定”。
- 若要更改给定事件的多个动作的顺序，请选择某个动作然后单击上下箭头。或者选择该动作，将其剪切并粘贴到其它动作之间的合适位置。
- 若要删除某个行为，请将其选中然后单击减号 (–) 按钮或按 Delete。

更新行为

选择一个附加有该行为的元素。
选择“窗口”>“行为”，双击该行为。
进行所需的更改，然后在该行为的对话框中单击“确定”。
该行为在此页面中所出现的每一处都将进行更新。如果站点中的其它页面上也包含该行为，则必须逐页更新这些行为。

下载和安装第三方提供的行为

Exchange for Dreamweaver 网站 (www.adobe.com/go/dreamweaver_exchange_cn) 上提供了许多扩展。

选择“窗口”>“行为”，然后从“添加行为”菜单中选择“获取更多行为”。
您的主浏览器打开，出现 Exchange 站点。
浏览或搜索扩展包。
下载并安装所需的扩展包。

有关详细信息，请参阅在 Dreamweaver 中添加和管理扩展。