使用 JavaScript 行为(一般说明)

上次更新日期: 2021年4月27日

在 Adobe Dreamweaver 中使用 JavaScript 行为将 JavaScript 代码置于文档中,以便访问者能够更改网页或发起某些任务。

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

注释

行为代码是客户端 JavaScript 代码,即在浏览器中运行,而不是在服务器上运行。

事件实际上是浏览器生成的消息,指示访问您页面的访客已执行某些操作。例如,当访客将指针移到链接上时,浏览器会为该链接生成 onMouseOver 事件;然后浏览器会检查是否应调用某些 JavaScript 代码(在正在查看的页面中指定)以作出响应。不同的事件是为不同页面元素定义的;例如,在大多数浏览器中,onMouseOveronClick 是与链接关联的事件,而 onLoad 是与图像以及文档的 body 部分关联的事件。

操作是预编写的 JavaScript 代码,用于执行任务,例如打开浏览器窗口、显示或隐藏 AP 元素、播放声音或停止 Adobe Shockwave 影片。Dreamweaver 提供的操作可实现最大的跨浏览器兼容性。

将行为附加到页面元素后,只要该元素发生相应事件,行为就会调用与事件关联的操作(JavaScript 代码)。(您可以用来触发给定操作的事件因浏览器而异。)例如,如果您将弹出消息操作附加到链接并指定其由 onMouseOver 事件触发,则每当有人将指针移到该链接上时,您的消息就会弹出。

单个事件可以触发多个不同的操作,并且您可以指定这些操作发生的顺序。

Dreamweaver 提供大约 24 个操作;可以在 www.adobe.com/go/dreamweaver_exchange 的 Exchange 网站以及第三方开发者网站上找到其他操作。如果您精通 JavaScript,可以编写自己的操作。

注释

术语行为动作属于 Dreamweaver 术语,而非 HTML 术语。 从浏览器的角度来看,操作就像任何其他 JavaScript 代码片段一样。

“行为”面板概述

您可以使用"行为"面板("窗口" > "行为")将行为附加到页面元素(更确切地说,附加到标记)并修改以前附加的行为的参数。

已附加到当前所选页面元素的行为会出现在行为列表(面板的主要区域)中,按事件的字母顺序列出。如果为同一事件列出了多个操作,则它们将按它们在列表中出现的顺序执行。如果行为列表中没有显示任何行为,则表示没有将任何行为附加到当前所选元素。

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

显示设置事件

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

显示所有事件

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

添加行为 (+)

显示可附加到当前所选元素的操作菜单。从此列表中选择操作时,会出现一个对话框,您可以在其中指定操作的参数。如果所有操作都变灰,则所选元素无法生成任何事件。

删除事件 (–)

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

向上箭头和向下箭头按钮

在特定事件的行为列表中向上或向下移动所选操作。仅可针对特定事件更改操作顺序,例如,您可以更改针对 onLoad 事件的多个操作的执行顺序,但所有 onLoad 操作在行为列表中保持在一起。对于无法在列表中上移或下移的操作,箭头按钮为禁用状态。

事件

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

注释

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

关于事件

每个浏览器都提供一组事件,您可以将这些事件与"行为"面板"操作"(+) 菜单中列出的操作相关联。当访客与您的网页进行交互时(例如,点击图像),浏览器会生成事件;这些事件可用于调用执行操作的 JavaScript 函数。Dreamweaver 提供了许多可通过这些事件触发的常用操作。

有关各浏览器提供的事件的名称和描述,请参阅位于 www.adobe.com/go/dreamweaver_support 的 Dreamweaver 技术支持中心。

根据所选对象的不同,"事件"菜单中会显示不同的事件。要了解给定浏览器对给定页面元素支持哪些事件,请在文档中插入该页面元素并为其附加一个行为,然后查看"行为"面板中的"事件"菜单。(默认情况下,事件来自 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) 上获取。

选择"窗口">"行为",然后从"添加行为"菜单中选择"获取更多行为"。

您的主浏览器打开,出现 Exchange 站点。

浏览或搜索扩展包。
下载并安装所需的扩展包。

有关更多信息,请参阅在 Dreamweaver 中添加和管理扩展