《网页设计与制作》课程教学课件（Dreamweaver教程）第12章 行为

第12章行为

第12章 行为

本章主要是学习如何应用行为在Dreamweaver中制作 出较强的交互性能，实现网页的动态效果。 > 12.1行为概述 行为是Dreamweaver MX中最有特色的功能，它可以 使用户不需要手动编写任何JavaScript代码，但可以制作 出很强的交互功能

➢ 本章主要是学习如何应用行为在Dreamweaver中制作 出较强的交互性能，实现网页的动态效果。 ➢ 12.1 行为概述 ➢ 行为是Dreamweaver MX中最有特色的功能，它可以 使用户不需要手动编写任何JavaScript代码，但可以制作 出很强的交互功能

> 12.1.1什么是行为 行为(Behaviors)是Macromedia预置的JavaScript程序 库，网页制作人员可以不用编程而使用这些行为而实现一些 程序动作，比如验证表单，打开一个浏览器窗口等。 行为是事件和动作的组合。动作是预先编写好的 JavaScript脚本代码，执行这些代码，可以完成相应的任务， 例如打升浏览器、播放声音或停止Shockwave电影等；可以 使用Dreamweaver内置的行为往网页中添加JavaScript代码， 而不必自己书写，也可以对现有的代码进行修改，使之更符 合自己的需要。 7 事件由浏览器定义，可以绑定到各种页面元素上，也可以 绑定到HTML标记中。例如onMouseOver、onMouseOut和 onClick等，在大多数浏览器中都是和链接相关联的；onLoad 是和图像以及文档正文相关联的事件。 将事件和动作组合起来，就构成了行为。一般将事件产 生的这个过程称为“触发

➢ 12.1.1 什么是行为 ➢ 行为（Behaviors）是Macromedia预置的JavaScript程序 库，网页制作人员可以不用编程而使用这些行为而实现一些 程序动作，比如验证表单，打开一个浏览器窗口等。 ➢ 行为是事件和动作的组合。动作是预先编写好的 JavaScript脚本代码，执行这些代码，可以完成相应的任务， 例如打开浏览器、播放声音或停止Shockwave电影等；可以 使用Dreamweaver内置的行为往网页中添加JavaScript代码， 而不必自己书写，也可以对现有的代码进行修改，使之更符 合自己的需要。 ➢ 事件由浏览器定义，可以绑定到各种页面元素上，也可以 绑定到HTML标记中。例如onMouseOver、onMouseOut和 onClick等，在大多数浏览器中都是和链接相关联的；onLoad 是和图像以及文档正文相关联的事件。 ➢ 将事件和动作组合起来，就构成了行为。一般将事件产 生的这个过程称为“触发

不是所有的动作都需要用户的干涉才会发生；有时候 不眼ee手精健女金 动作发生的顺序，从而实现需要的结果。 为文档中的对象添加某种行为的操作步骤通常是：选 中某个需要添加行为的对象，然后选择某种动作、（同时设 置一些参数)，最好选择当什公事件发生时执行这个动作

➢ 不是所有的动作都需要用户的干涉才会发生；有时候 会有多个动作同一个事件相关联，就是当事件发生时，会 导致多个动作被执行，在Dreamweaver中，可以指定这些 动作发生的顺序，从而实现需要的结果。 ➢ 为文档中的对象添加某种行为的操作步骤通常是：选 中某个需要添加行为的对象，然后选择某种动作（同时设 置一些参数），最好选择当什么事件发生时执行这个动作

12.1.2事件 由于浏览器版本不同，它所支持的事件类型可能也不 同。为了区别，本书将分类指出。其中，“E3.0”表示它 适用于Internet Explorer3.0浏览器；“IE4.0”表示它适用 于Internet Explorer4.0浏览器；“NS3.0”表示它适用于 Nerscape Navigator3.0浏览器；“NS4.0”表示它适用于 Nerscape Navigator4.0浏览器。 以下是在制作网页时常用的事件及其含义。同时用户 可以从Dreamweaver安装目录的 Configration/Beheviors/,Events文件夹中找寻，在该文件 夹中包含多个HTML文档，根据浏览器的不同，打开相应 的文档，然后查询事件信息。 onAbort(IE4、NS3、NS4):当用户停止浏览器对 图像的载入时会触发该事件。例如，当图像被下载时用户 单击了浏览器的“停止”按钮，此时会触发该事件

➢ 12.1.2 事件 ➢ 由于浏览器版本不同，它所支持的事件类型可能也不 同。为了区别，本书将分类指出。其中，“IE3.0”表示它 适用于Internet Explorer 3.0浏览器；“IE4.0”表示它适用 于Internet Explorer 4.0浏览器；“NS3.0”表示它适用于 Nerscape Navigator 3.0浏览器；“NS4.0”表示它适用于 Nerscape Navigator 4.0浏览器。 ➢ 以下是在制作网页时常用的事件及其含义。同时用户 可以从Dreamweaver安装目录的 Configration/Beheviors/Events文件夹中找寻，在该文件 夹中包含多个HTML文档，根据浏览器的不同，打开相应 的文档，然后查询事件信息。 ➢ onAbort（IE4、NS3、NS4）：当用户停止浏览器对 图像的载入时会触发该事件。例如，当图像被下载时用户 单击了浏览器的“停止”按钮，此时会触发该事件

onAfterUpdate(IE4):当页面上的绑定数据的元素完成 数据源更新时会触发该事件。 on BeforeUpdate(IE4):当页面上的绑定数据元素已经被 修改并且将要失去焦点时，也就是将要更新数据源时，触发该 事件。 onBlur(NS3、NS4、IE3、IE4):和onFocus数据正好相 反，当指定元素不再作为用户交互的焦点时触发该事件。例如， 堂用户京侯文档框中单麦之后，’ 如果在该文本域的外面再次单 击，就会生成文本框中的on Blur事件。 onBounce(IE4):当选取框元素的内容已经到达选取框 的边界时触发该事件。 onChage(NS3、NS4、IE3、E4)：当用户改变了页面 中的值时会触发该事件。例如从下拉列表中选择一个菜单项： 或当用户改变了文本框中的文本，然后在页面其他位置单击使， 也可触发该事件。 onClick(NS3、NS4、IE3、IE4):当用户单击特定的页 面元素，例如链接、按钮以及图像热点区域等时，触发该事件。 onDblClick(NS4、E4):当用户双击特定的页面元素， 例如链接、按钮以及图像热点区域等时，触发该事件

➢ onAfterUpdate（IE4）：当页面上的绑定数据的元素完成 数据源更新时会触发该事件。 ➢ onBeforeUpdate（IE4）：当页面上的绑定数据元素已经被 修改并且将要失去焦点时，也就是将要更新数据源时，触发该 事件。 ➢ onBlur（NS3、NS4、IE3、IE4）：和onFocus数据正好相 反，当指定元素不再作为用户交互的焦点时触发该事件。例如， 当用户在某文档框中单击之后，如果在该文本域的外面再次单 击，就会生成文本框中的onBlur事件。 ➢ onBounce（IE4）：当选取框元素的内容已经到达选取框 的边界时触发该事件。 ➢ onChage（NS3、NS4、IE3、IE4）：当用户改变了页面 中的值时会触发该事件。例如从下拉列表中选择一个菜单项； 或当用户改变了文本框中的文本，然后在页面其他位置单击使， 也可触发该事件。 ➢ onClick（NS3、NS4、IE3、IE4）：当用户单击特定的页 面元素，例如链接、按钮以及图像热点区域等时，触发该事件。 ➢ onDblClick（NS4、IE4）：当用户双击特定的页面元素， 例如链接、按钮以及图像热点区域等时，触发该事件

onError(IE4、NS3、NS4):如果浏览器在载入页面或 图像时产生错误会触发该事件。 nFinish(IE4):当选取元素的内容完成循环时会触发该 事件 onFocus(NS3、NS4、IE3、IE4):当指定元素变成用 户交互的焦点时触发该事件。 onHelp(IE4):当用户单击浏览器的“帮助”按钮或从 浏览器菜单中选择“帮助”时触发该事件。 onKeyDown(NS4、IE4):当用户按下任意键而未释放 时触发该事件。 onKeyPress(NS4、IE4):当用户按下任意键时触发该 事件，该事件相当于onKeyDown和onKeyUp事件的组合。 onKeyUp(NS4、IE4):当用户释放按下的任意键时触 发该事件。 onLoad(NS3、NS4、IE3、IE4):当图像或页面完成装 载时触发该事件。 onMouseDown(IE4、NS4):当用户按下鼠标左键而未 释放时触发该事件

➢ onError（IE4、NS3、NS4）：如果浏览器在载入页面或 图像时产生错误会触发该事件。 ➢ onFinish（IE4）：当选取元素的内容完成循环时会触发该 事件。 ➢ onFocus（NS3、NS4、IE3、IE4）：当指定元素变成用 户交互的焦点时触发该事件。 ➢ onHelp（IE4）：当用户单击浏览器的“帮助”按钮或从 浏览器菜单中选择“帮助”时触发该事件。 ➢ onKeyDown（NS4、IE4）：当用户按下任意键而未释放 时触发该事件。 ➢ onKeyPress（NS4、IE4）：当用户按下任意键时触发该 事件，该事件相当于onKeyDown和onKeyUp事件的组合。 ➢ onKeyUp（NS4、IE4）：当用户释放按下的任意键时触 发该事件。 ➢ onLoad（NS3、NS4、IE3、IE4）：当图像或页面完成装 载时触发该事件。 ➢ onMouseDown（IE4、NS4）：当用户按下鼠标左键而未 释放时触发该事件

onMouseMove(IE3、IE4):当用户在指定元素内移动 鼠标时触发该事件。 onMouseOut(NS3、NS4、IE4):当鼠标指针移出了指 定元素时触发该事件。 onMouseOver(NS3、NS4、IE3、IE4):当鼠标从指定 元素之外移动到指定元素之上时触发该事件。 onMouseUp(IE4、NS4):当释放按下的鼠标左键时触 发该事件。 onMove(NS4):当窗口或框架移动时触发该事件。例如 拖动浏览器窗口在桌面上移动，就会触发该事件。 onReadyStateChange(IE4):当指定元素的状态被改变 时触发该事件。这些可能的状态包括未初始化(uninitialized)、 载入(loading)和完成(complete)等。 onReset(NS3、NS4、IE3、IE4):当表单中的数据被@ 重置为默认值时会触发该事件

➢ onMouseMove（IE3、IE4）：当用户在指定元素内移动 鼠标时触发该事件。 ➢ onMouseOut（NS3、NS4、IE4）：当鼠标指针移出了指 定元素时触发该事件。 ➢ onMouseOver（NS3、NS4、IE3、IE4）：当鼠标从指定 元素之外移动到指定元素之上时触发该事件。 ➢ onMouseUp（IE4、NS4）：当释放按下的鼠标左键时触 发该事件。 ➢ onMove（NS4）：当窗口或框架移动时触发该事件。例如 拖动浏览器窗口在桌面上移动，就会触发该事件。 ➢ onReadyStateChange（IE4）：当指定元素的状态被改变 时触发该事件。这些可能的状态包括未初始化（uninitialized）、 载入（loading）和完成（complete）等。 ➢ onReset（NS3、NS4、IE3、IE4）：当表单中的数据被 重置为默认值时会触发该事件

onResize(IE4、NS4):当用户调整浏览器窗口或框架的 大小时触发该事件。 onRowEnter(IE4):在捆绑数据源的当前记录指针将要改 变时触发该事件。 onRowExit(IE4):在捆绑数据源的当前记录指针改变后触 发该事件。 onScroll(IE4):当用户拖动滚动条上下移动浏览窗口时触 发该事件。 onSelect(NS3、NS4、IE3、IE4):当用户从一个文本框 中选中文本时，触发该事件。 nStart(IE4)：当选取元素中的内容开始循环时，触发该 事件 onSubmit(NS3、NS4、IE3、IE4):当用户提交表单时 触发该事件。 onUnload(NS3、NS4、IE3、IE4):当页面卸载时触发该 事件。例如当用户从一个页面跳转到另一个页面时，原先的页面 就会触发该事件

➢ onResize（IE4、NS4）：当用户调整浏览器窗口或框架的 大小时触发该事件。 ➢ onRowEnter（IE4）：在捆绑数据源的当前记录指针将要改 变时触发该事件。 ➢ onRowExit（IE4）：在捆绑数据源的当前记录指针改变后触 发该事件。 ➢ onScroll（IE4）：当用户拖动滚动条上下移动浏览窗口时触 发该事件。 ➢ onSelect（NS3、NS4、IE3、IE4）：当用户从一个文本框 中选中文本时，触发该事件。 ➢ onStart（IE4）：当选取元素中的内容开始循环时，触发该 事件。 ➢ onSubmit（NS3、NS4、IE3、IE4）：当用户提交表单时 触发该事件。 ➢ onUnload（NS3、NS4、IE3、IE4）：当页面卸载时触发该 事件。例如当用户从一个页面跳转到另一个页面时，原先的页面 就会触发该事件

12.2行为应用 非、标签body> > 12.2.1行为面板 属性行为相关C3S +，一人 在Dreamweaver!中， onBlur onError onFocus 对行为的添加和控制主 onLoad onLoad 多超议变 onLoad 播敬声音 要是通过行为面板实现。 选择菜单“窗 口”“行为”选项， 启动行为面板，如图 12-1所示。 图12-1启动行为面板

➢ 12.2.1 行为面板 ➢ 在Dreamweaver中， 对行为的添加和控制主 要是通过行为面板实现。 选择菜单“窗 口”→“行为”选项， 启动行为面板，如图 12-1所示。 图12-1 启动行为面板 12.2 行为应用